2021-10-11

antd checkbox的使用

1、勾选时拿到的勾选数据和复选框后展示的数据一致

即:引用antd官网的案例
2021-10-11

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-2allsobaiduweb~default-1-111804878&spm=3001.4430

上一篇:React onClick/onChange 传参 (bind绑定)


下一篇:一、java核心技术卷一集合