Question

我需要给表行赋予不同的ID，以便当我单击第一行时，它将在控制台上显示“ selectedRow：1”。单击第二行，它将显示“ selectedRow：2”

谢谢！

这是我的代码：

<tbody>
  {this.testData.map((item, i) => {
    return (
      <tr onClick={this.handler} key={i} >
        <td>{item.name}</td>
        <td>{item.age}</td>
        <td>{item.address}</td>
      </tr>
    );
  })}
</tbody>

handler=(e)=>{
  let selectedRow = e.target.id //doesn't work
  console.log("selectedRow:", selectedRow)
}

Answer 1

要使其正常工作，您需要为每个tr赋予一个id属性，但是最好是直接将id传递给函数，就像这样：

<tr onClick={() => this.handler(item.id)}>

如果项目没有唯一的ID，您也可以使用索引。

现在处理程序函数将把id作为参数接收：

handler = (selectedRow) => {
    console.log("selectedRow:", selectedRow)
}

Answer 2

对于tr onClick，我们可以根据需要提供ID <tr onClick={this.handler(item.id)}> 并且我们的处理程序函数将是如下所示的高级函数，那么我们不需要每次都创建函数

handler = id => e => {
console.log(id)

}

Sample code code from sandbox

如何在React中为表行赋予唯一ID

2 个答案: