Как использовать antd множественный флажок в reactjs?

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 "]

Ожидаемый вывод для непроверенного: Unchecked: [" 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>
    );
  }
}