Checkbox由Z9ED39E2EA2EA931586B6A985A6942EF573EZ驱动到检查时没有响应Onchange

Question

我有一个 material-ui Table ，并且一直在上面实现多选功能。

我的多 select 应该表现如下：

• Select 复选框仅出现在 hover 的行首（未选择任何内容时）
• 一旦选择了一行，所有其他复选框将永久可见。
• TableHead 中的复选框将在切换时TableHead / 取消选择Table中的所有行。

每行都有自己独特的id 。

我通过一个useState挂钩维护一个名为idsOfSelectedRows的Set ，以跟踪当前选择的所有行。

每个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);
          }
    );
  };

我的问题是单击行上的复选框没有响应。 我可以通过单击表头中的select 所有Checkbox来TableHead所有这些复选框，但单击各个行中的复选框不会更改其 state？

这是重现确切问题的完整 CodeSandbox。 我需要做什么才能使行中的复选框可切换？

Answer 1

从onChange分配中删除() =>以便快速修复。

为什么

您正在声明一个匿名内联 function，但 function 没有调用任何东西（缺少()是调用函数的语法）。 onChange接受 function 参考。 当你给它一个内联 function 时，它会调用 function。 另一种选择是仅将句柄RowSelectionCheckboxClick 的handleRowSelectionCheckboxClick引用传递给它，然后在更改时将调用 function 而不是匿名的 ZC1C425268E68385D14AB5074C17Z9 中间人。

所以你的两个选择是：

onChange={handleRowSelectionCheckboxClick} // Just the reference

或者

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

在大多数情况下，第二种方式是不必要的。 除非您需要传递自定义参数，否则首选第一个。 以下是它可能有用的示例：

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

在您的沙箱中，您对元素进行 map 并且每个元素都获得一个更改处理程序。 要在处理程序中单独处理它们，您可以像上面一样将一个额外的变量传递给 function。

例如，我通过将处理程序和分配更改为：

const handleRowSelectionCheckboxClick = (event, idOfClickedRow) => {

...

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

Answer 2

这一行： event.target.attributes.getNamedItem("id").value; 不会为您提供所需的 id，因为没有通过，请像这样更改chekbox ：

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

然后，像这样检索 ID：

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

更新的代码框：

---

像其他答案建议的那样，更改handleRowSelectionCheckboxClick function 调用，如示例中所示。 如果您喜欢匿名 function 的解决方案，您应该添加() ： onChange={() => handleRowSelectionCheckboxClick()}