antd--checkBox组件--待完善

1. 根据antd的案列，如果从后端返回数据，怎么做到全选和取消全选

2.遇到的坑：在options中，当后端返回的对象是数组对象格式时，所展示的label，和value。当单词label写错时，antd无法识别,会展示错误，value写错时，直接报错

3.总结：需要和后端商量返回的字段，或者自己遍历出相对应的格式

`

const {  Checkbox, Divider  } = antd;
const CheckboxGroup = Checkbox.Group;
const testData = [  //模拟后端返回的数据
                  {
                    label:"apple",
                    value:"1"
                  },
                  {
                    label:"pear",
                    value:"2"
                  },
                  {
                    label:"orange",
                    value:"3"
                  }
                ];
const App = () => {
  const [checkedList, setCheckedList] = React.useState('');
  const [indeterminate, setIndeterminate] = React.useState(true);
  const [checkAll, setCheckAll] = React.useState(false);
  let myData = testData.map((item)=>{return item.value}) //这里需要注意需要将所以的value值取出来，用作全选
  const onChange = (list) => {
    console.log(list,'list')
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < testData.length);
    setCheckAll(list.length === testData.length);
  };

  const onCheckAllChange = e => {
    console.log(e.target.checked,'123')
    setCheckedList(e.target.checked ? myData : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  return (
    <>
      <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
        Check all
      </Checkbox>
      <Divider />
      <CheckboxGroup options={testData} value={checkedList} onChange={onChange} />
    </>
  );
};

ReactDOM.render(<App />, mountNode);

`