javascript - 如何在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状态。

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

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

您还需要管理多个不确定和checkAll状态。当您从 checkList 状态推导出这些内容时，可以避免这种情况。例如:

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

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