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>