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}
                  />

该文章的参考原文地址：https://blog.csdn.net/weixin_39552768/article/details/111804878?utm_term=antd%E4%B8%AD%E7%9A%84checkbox&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-1-111804878&spm=3001.4430

标签：11,10,plainOptions,value,length,选中,2021,onChange,checkedList
来源： https://blog.csdn.net/qq_42582339/article/details/120707368