Как обрабатывать состояние на массиве флажков?

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>
        ))}

      )
    }
}

Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда я убираю одну из них, остальные тоже не проверяются.Мне нужно управлять состоянием отдельно, чтобы отправить некоторую информацию другим компонентам с помощью действия приращения.

РЕДАКТИРОВАТЬ:

Это библиотека пользовательского интерфейса, которую я использую

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 (библиотека проходит id) и установите checked флаг
• В render, получите items из состояния и для каждого элемента используйтеего checked флаг, а не ваш `isChecked (который я полностью удалил