标签：11 10 plainOptions value length 选中 2021 onChange checkedList
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}
/>
标签：11,10,plainOptions,value,length,选中,2021,onChange,checkedList 来源： https://blog.csdn.net/qq_42582339/article/details/120707368
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。