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