mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 21:19:37 +08:00
parent
c79e2dcfe4
commit
ca15c9832e
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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);
|
||||
````
|
||||
|
Loading…
Reference in New Issue
Block a user