javascript - 如何处理复选框数组的状态？

Question

有没有办法处理复选框数组的选中状态？

我有这个数组:

const CheckboxItems = t => [
  {
    checked: true,
    value: 'itemsCancelled',
    id: 'checkBoxItemsCancelled',
    labelText: t('cancellations.checkBoxItemsCancelled'),
  },
  {
    checked: true,
    value: 'requestDate',
    id: 'checkboxRequestDate',
    labelText: t('cancellations.checkboxRequestDate'),
  },
  {
    checked: true,
    value: 'status',
    id: 'checkboxStatus',
    labelText: t('cancellations.checkboxStatus'),
  },
  {
    checked: true,
    value: 'requestedBy',
    id: 'checkboxRequestedBy',
    labelText: t('cancellations.checkboxRequestedBy'),
  },
];

我在这里使用它:

class TableToolbarComp extends React.Component {
    state = {
        isChecked: true,
    };

    onChange = (value, id, event) => {       
      this.setState(({ isChecked }) => ({ isChecked: !isChecked }));
    };


    render() {
      const { isChecked } = this.state;
      return (
        {CheckboxItems(t).map(item => (
          <ToolbarOption key={item.id}>
            <Checkbox
              id={item.id}
              labelText={item.labelText}
              value={item.value}
              checked={isChecked}
              onChange={this.onChange}
            />
          </ToolbarOption>
        ))}

      )
    }
}

我遇到的问题是，每次我取消选中一个，其余的也会取消选中。我需要单独管理状态以通过 redux 操作将一些信息发送到其他组件。

编辑:

This is the UI library I am using

Answer 1

您正在使用容器的 isChecked 作为所有复选框的状态，使用容器上的一种方法来翻转适用于所有复选框的那个标志他们(isChecked)。

相反，要么:

1. 给复选框本身状态，而不是让它们成为简单的对象，或者

2. 在容器中维护一个由复选框项(或者可能是它的名称)键入的状态映射

我会倾向于 #1，我认为在那个库中看起来像这样:

class TableToolbarComp extends React.Component {
    state = {
        items: CheckboxItems(t) // Your code seems to have a global called `t`
    };

    onChange = (value, id, event) => {       
        this.setState(({ items }) => {
          // Copy the array
          items = items.slice();
          // Find the matching item
          const item = items.find(i => i.id === id);
          if (item) {
              // Update its flag and set state
              item.checked = !item.checked;
              return { items };
          }
        });
    };

    render() {
      const { items } = this.state;
      return (
        {items.map(item => (
          <ToolbarOption key={item.id}>
            <Checkbox
              id={item.id}
              labelText={item.labelText}
              value={item.value}
              checked={item.checked}
              onChange={this.onChange}
            />
          </ToolbarOption>
        ))}

      )
    }
}

变化:

• 调用 CheckboxItems 一次，将结果保持为状态。
• 在onChange中，通过id找到相关的checkbox(lib传递id)并翻转它的checked 旗帜
• 在 render 中，从状态中获取 items，对于每个项目，使用它的 checked 标志，而不是你的 `isChecked(我'已完全删除