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

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操作将一些信息发送到其他组件.

编辑:

这是我正在使用的UI库

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(lib传递id)找到相关的复选框并翻转其checked标志
• 在render,获取itemsfrom状态和每个项目,使用它的checked标志,而不是你的`isChecked(我已经完全删除了)