antd checkbox的使用
1、勾选时拿到的勾选数据和复选框后展示的数据一致
即:引用antd官网的案例
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
class App extends React.Component {
state = {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
};
//此时checkedList 里边是选中的数据['Apple', 'Orange']
onChange = checkedList => {
this.setState({
checkedList,
indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
checkAll: checkedList.length === plainOptions.length,
});
};
onCheckAllChange = e => {
this.setState({
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
});
};
render() {
return (
<div>
<div style={{ borderBottom: '1px solid #E9E9E9' }}>
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
Check all
</Checkbox>
</div>
<br />
<CheckboxGroup
options={plainOptions}//此处是复选框需要展示的数据数组
value={this.state.checkedList}//value值里边存放了已选择的数据
onChange={this.onChange}//复选框选中和不选中的状态发生改变时,onChange里边可以拿到选中的数据
/>
</div>
);
}
}
2、勾选时拿到的勾选数据和复选框后展示的数据不一致
即:复选框后展示的数据可能重名,而当选中状态发生改变时我们需要分辨到底选中了谁,比如复选框选人名,但人的姓名重名了,此时我们应该如何分辨选中了谁?,此时应该如何做呢?
例:如果复选框有两个李华,而此时只要选中其中一个,checkedList=[“李华”],此时页面中的两个李华都会被选中。
解决办法:将展示数据从原来的字符串数组改为对象数组,展示在页面的位数据对象的label属性,而选中状态改变时,checkedList拿到的为数据对象的value属性,该value属性即为数据的唯一标识,避免了选中重名选项的问题。
const plainOptions = [{label:'李华',value: '1',{ label:'李四',value: '2'}, {label:'李华',value: '3'}];
const defaultCheckedList = ['1'];
class App extends React.Component {
state = {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
};
//此时checkedList 里边是选中的数据['1']
onChange = checkedList => {
this.setState({
checkedList,
indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
checkAll: checkedList.length === plainOptions.length,
});
};
onCheckAllChange = e => {
this.setState({
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
});
};
render() {
return (
<div>
<div style={{ borderBottom: '1px solid #E9E9E9' }}>
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
Check all
</Checkbox>
</div>
<br />
<CheckboxGroup
options={plainOptions}//此处是复选框需要展示的数据数组
value={this.state.checkedList}//value值里边存放了已选择的数据
onChange={this.onChange}//复选框选中和不选中的状态发生改变时,onChange里边可以拿到选中的数据
/>
</div>
);
}
}
下面是我在项目中的写法,数据是从后端接口返回的:
<CheckboxGroup
//leftTableSource是从后端接口返回的数据
options={leftTableSource.map((item) => {
return {
label: item.name,
value: item.id,
};
})}
value={this.state._checkedList}
onChange={this._onChange}
/>