如何在reactjs中选择基于组的复选框antd

Question

我想选择一个基于组的复选框。 问题是当我单击组时，整个复选框都被选中。 我不想选中整个复选框。 这是我的初始状态。

const plainOptions = ["can_view", "can_create", "can_update"];
state = {
  checkedList: [],
  indeterminate: true,
  checkAll: false
};

方法： onchange方法基本上适用于每个单独的复选框。

onChange = checkedList => {
  console.log(checkedList);
  this.setState({
    checkedList,
    indeterminate:
      !!checkedList.length && checkedList.length < plainOptions.length,
    checkAll: checkedList.length === plainOptions.length
  });
};

此方法适用于选中的所有复选框

onCheckAllChange = e => {
  console.log(e.target.checked);
  this.setState({
    checkedList: e.target.checked ? plainOptions : [],
    indeterminate: false,
    checkAll: e.target.checked
  });
};
{
  ["group", "topGroup"].map(item => (
    <div className="site-checkbox-all-wrapper">
      <Checkbox
        indeterminate={this.state.indeterminate}
        onChange={this.onCheckAllChange}
        checked={this.state.checkAll}
      >
        {item}
      </Checkbox>
      <CheckboxGroup
        options={plainOptions}
        value={this.state.checkedList}
        onChange={this.onChange}
      />
    </div>
  ));
}

但是，我接受的数据格式是

{group:["can_view","can_create"],topGroup:["can_view","can_create"}

当用户在复选框上选择时，我想获得这种格式的输出

这是代码沙箱： https : //codesandbox.io/s/agitated-sea-1ygqu

Answer 1

当您单击其中一个组中的某些内容时，两个组都会更改的原因是因为这两个组使用相同的内部状态。

["group", "topGroup"].map(item => (
  <div className="site-checkbox-all-wrapper">
    <Checkbox
      indeterminate={this.state.indeterminate}
      onChange={this.onCheckAllChange}
      checked={this.state.checkAll}
    >
      {item}
    </Checkbox>
    <CheckboxGroup
      options={plainOptions}
      value={this.state.checkedList}
      onChange={this.onChange}
    />
  </div>
));

group和topGroup使用相同的this.state.checkList状态。

---

解决此问题的最简单方法是将每个组提取到其自己的组件中。 这样他们就有了自己的状态，彼此分开。

---

您也可以选择保留一个组件，但您必须管理多个内部状态。 例如，您可以使用state = { checkList: [[], []] }其中第一个子数组用于存储group状态，第二个子数组用于存储topGroup状态。

如果组是动态的，您可以简单地map组并以这种方式创建状态：

state = { checkList: groups.map(() => []) };

您还需要管理多个indeterminate和checkAll状态。 当您从checkList状态推断这些时，可以避免这种情况。 例如：

isIndeterminate(index) {
  const checkList = this.state.checkList[index];
  return checkList.length > 0 && checkList.length < plainOptions.length;
}

这也将避免冲突状态，因为只有一个事实来源。