如何在 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"] 來保存未選中的值

未選中的預期 Output：未選中：[“梨”]

這是我的代碼框：

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>
    );
  }
}