如何在reactjs中使用antd复选框？

Question

我正在使用antd复选框。我正在使用值数组存储检查后的值，但是我需要存储未检查的值数组。

    const plainOptions = ["Apple", "Pear", "Orange"];
    const defaultCheckedList = ["Apple", "Orange"];

      state = {
        checkedList: defaultCheckedList
      };

      onChange = checkedList => {
        this.setState({
          checkedList
        });
      };

      onCheckAllChange = e => {
        this.setState({
          checkedList: e.target.checked ? plainOptions : []
        });
      };

      onCheckItem = value => e => {
        this.setState({
          checkedList: this.state.checkedList.includes(value)
            ? this.state.checkedList.filter(x => x !== value)
            : [...this.state.checkedList, value]
        });
      };

 // This is checked All , When user click on this checked box , it will be store array of value.  
              <Checkbox
                indeterminate={
                  checkedList.length < plainOptions.length && checkedList.length > 0
                }
                onChange={this.onCheckAllChange}
                checked={checkedList.length === plainOptions.length}
              >
                Check all
              </Checkbox>

            {plainOptions.map((item, idx) => (
              <Checkbox
                key={item + idx}
                onChange={this.onCheckItem(item)}
                checked={checkedList.includes(item)}
              >
                {item}
              </Checkbox>
            ))}

当前，当我选中复选框时，它将为我提供诸如[“ apple”，“ Orange”]之类的值的数组，但是我想通过使用值[[Pear]的数组来保持未选中的值的存储

未选中的预期输出：未选中：[“梨”]

这是我的代码整理箱：

https://codesandbox.io/s/check-all-ant-design-demo-b3udh?fontsize=14&hidenavigation=1&theme=dark&file=/index.js:0-1613

Answer 1

const plainOptions = ["Apple", "Pear", "Orange"];
const defaultCheckedList = ["Apple", "Orange"];

class App extends React.Component {
  state = {
    checkedList: defaultCheckedList,
    uncheckedList: []
  };

  onChange = checkedList => {
    this.setState({
      checkedList
    });
  };

  onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      uncheckedList: e.target.checked ? [] : plainOptions
    });
  };

  onCheckItem = value => e => {
    this.setState(
      {
        checkedList: this.state.checkedList.includes(value)
          ? this.state.checkedList.filter(x => x !== value)
          : [...this.state.checkedList, value]
      },
      () => {
        this.setState({
          uncheckedList: plainOptions.filter(
            o => !this.state.checkedList.includes(o)
          )
        });
      }
    );
  };

  render() {
    const { checkedList, uncheckedList } = this.state;
    console.log(uncheckedList);
    return (
      <div>
        <div className="site-checkbox-all-wrapper">
          <Checkbox
            indeterminate={
              checkedList.length < plainOptions.length && checkedList.length > 0
            }
            onChange={this.onCheckAllChange}
            checked={checkedList.length === plainOptions.length}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        {plainOptions.map((item, idx) => (
          <Checkbox
            key={item + idx}
            onChange={this.onCheckItem(item)}
            checked={checkedList.includes(item)}
          >
            {item}
          </Checkbox>
        ))}
      </div>
    );
  }
}