Флажок не реагирует на onChange, когда он установлен, управляется состоянием

Question

У меня есть material-ui Table, и я реализовал на нем функцию множественного выбора.

Мой множественный выбор должен вести себя следующим образом:

• Флажки выбора появляются только в начале строки при наведении курсора (когда ничего не было выбрано)
• После выбора одной строки все остальные флажки становятся постоянно видимыми.
• Флажок в TableHead будет выбран / отменить выбор всех строк в Table при переключении.

Каждая строка имеет свой собственный уникальный id.

Я поддерживаю Set с именем idsOfSelectedRows с помощью useState, чтобы отслеживать все выбранные в данный момент строки.

Каждый TableRow имеет Checkbox, который выглядит так

<Checkbox
  className={
     idsOfSelectedRows.size === 0 &&
     styles.rowSelectionCheckboxStyle
  }
  onChange={() => handleRowSelectionCheckboxClick}
  checked={idsOfSelectedRows.has(row.id)}
 />

и handleRowSelectionCheckboxClick выглядят так

  const handleRowSelectionCheckboxClick = event => {
    const idOfClickedRow = event.target.attributes.getNamedItem("id").value;
   //If the checkbox has just become checked then add it to the idOfSelectedRows Set, otherwise remove it.
    setIdsOfSelectedRows(
      event.target.checked
        ? new Set(idsOfSelectedRows.add(String(idOfClickedRow)))
        : () => {
            idsOfSelectedRows.delete(String(idOfClickedRow));
            return new Set(idsOfSelectedRows);
          }
    );
  };

Моя проблема заключается в том, что нажатие на флажки в строках не отвечает. Я могу выбрать их все, нажав выбрать все Checkbox в TableHead, но нажатие на флажки в отдельных строках не меняет их состояние?

Вот полный код CodeSandbox, воспроизводящий точную проблему. Что мне нужно сделать, чтобы флажки в строках можно было переключать?

Answer 1

Удалите () => из задания onChange для быстрого исправления.

Почему

Вы объявляете анонимную встроенную функцию, но эта функция ничего не вызывает (отсутствует () синтаксис для вызова функции). onChange принимает ссылку на функцию. Когда вы даете ему встроенную функцию, она будет вызывать эту функцию. Другой вариант - передать ему только функцию ссылка из handleRowSelectionCheckboxClick, а затем эта функция будет вызываться при изменении вместо посредника анонимной функции.

Итак, у вас есть два варианта:

onChange={handleRowSelectionCheckboxClick} // Just the reference

OR

onChange={(e) => handleRowSelectionCheckboxClick(e)} // New inline function that calls your function 

Второй способ в большинстве случаев не нужен. Первый вариант предпочтительнее, если вам не нужно передавать специальные параметры. Вот пример того, как это может быть полезно:

onChange={(e) => handleRowSelectionCheckboxClick(e, id)}

В вашей песочнице вы сопоставляете элементы, и каждый из них получает обработчик изменений. Чтобы обрабатывать их отдельно в обработчике, вы можете передать дополнительную переменную функции, как указано выше.

Например, я заставил вашу песочницу работать, изменив обработчик и назначив ему:

const handleRowSelectionCheckboxClick = (event, idOfClickedRow) => {

...

onChange={(e) => handleRowSelectionCheckboxClick(e, row.id)}

Answer 2

Эта строка: event.target.attributes.getNamedItem("id").value; не даст вам требуемый идентификатор, поскольку он не передан, измените chekbox следующим образом:

<Checkbox
    id={row.id}
    onChange={handleRowSelectionCheckboxClick}
    checked={idsOfSelectedRows.has(row.id)}
/>

Затем получите идентификатор, например :

const idOfClickedRow = event.target.attributes.id.value;

Обновленные коды и ящик :

---

Как и в других ответах, измените вызов функции handleRowSelectionCheckboxClick как показано в примере. Если вам нравится ваше решение с анонимной функцией, вы должны добавить (): onChange={() => handleRowSelectionCheckboxClick()}