CheckboxGroup support label in option

close #1155, #1025
This commit is contained in:
afc163 2016-03-09 21:08:08 +08:00
parent c79e2dcfe4
commit ca15c9832e
2 changed files with 36 additions and 8 deletions

View File

@ -32,11 +32,23 @@ export default React.createClass({
});
}
},
getOptions() {
const { options } = this.props;
return options.map(option => {
if (typeof option === 'string') {
return {
label: option,
value: option,
};
}
return option;
});
},
toggleOption(option) {
const optionIndex = this.state.value.indexOf(option);
const optionIndex = this.state.value.indexOf(option.value);
const value = [...this.state.value];
if (optionIndex === - 1) {
value.push(option);
value.push(option.value);
} else {
value.splice(optionIndex, 1);
}
@ -46,16 +58,16 @@ export default React.createClass({
this.props.onChange(value);
},
render() {
const options = this.props.options;
const options = this.getOptions();
return (
<div className="ant-checkbox-group">
{
options.map(option =>
<Checkbox disabled={this.props.disabled}
checked={this.state.value.indexOf(option) !== -1}
checked={this.state.value.indexOf(option.value) !== -1}
onChange={this.toggleOption.bind(this, option)}
className="ant-checkbox-group-item" key={option}>
{option}
className="ant-checkbox-group-item" key={option.value}>
{option.label}
</Checkbox>
)
}

View File

@ -2,7 +2,7 @@
- order: 3
方便的从数组生成 Checkbox 组。若需要 label 和 value 分离请直接使用 Checkbox。
方便的从数组生成 Checkbox 组。
---
@ -14,7 +14,23 @@ function onChange(checkedValues) {
console.log('checked = ', checkedValues);
}
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [{
label: '苹果',
value: 'Apple',
}, {
label: '梨',
value: 'Pear',
}, {
label: '橘',
value: 'Orange',
}];
ReactDOM.render(
<CheckboxGroup options={['Apple', 'Pear', 'Orange']} defaultValue={['Apple']} onChange={onChange} />
<div>
<CheckboxGroup options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
<br />
<CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange} />
</div>
, mountNode);
````