React：我如何訪問一個屬性<td>標簽

Question

在我的代碼中，我試圖從我的 onClick() 函數傳遞一些數據

<TableCell value={i} align="center" onClick={e => this.deleteUser(e)}><DeleteIcon /></TableCell>

我的表格單元格是在 for 循環中創建的，並且在第一次創建時被分配了值 i。 單擊刪除用戶圖標時，我還希望傳遞 i 值。 在我的 onClick 函數中，偶數被傳遞

deleteUser(e) {
        console.log(e.currentTarget). 
    }

這是我的刪除用戶功能。 當我用 console.log() 測試函數時。 這是打印的

<td class="MuiTableCell-root MuiTableCell-alignCenter" value="0"> ... </td>

如何從 td 標簽中獲取價值？ 我無法使用 event.currentTarget.value 訪問它

Answer 1

將i傳遞給您的deleteUser函數

<TableCell value={i} align="center" onClick={e => this.deleteUser(e, i)}><DeleteIcon /></TableCell>

您將獲得價值作為第二個參數

deleteUser(e, value) {
  console.log(e.currentTarget, value); 
}

Answer 2

您可以使用 currentTarget 的getAttribute屬性。 https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

 function handleclick(e) { var val = e.getAttribute("value"); console.log("test " + val); }

 <table> <tr><td value="55" onclick="handleclick(this)">test</td></tr> </table>

---

由於它是 React，您可能希望直接在 onClick 中提供 i 值。

<TableCell align="center" onClick={e => this.deleteUser(i)}><DeleteIcon /></TableCell>