Javascript 如何为react中的表行指定唯一id

我需要为表行指定不同的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)
}

{this.testData.map（（项，i）=>{
返回(
{item.name}
{item.age}
{item.address}
);
})}
处理程序=（e）=>{
让selectedRow=e.target.id//不起作用
日志（“selectedRow:，selectedRow”）
}

要实现这一点，您需要为每个

tr

赋予一个

id

属性，但最好直接将该id传递给函数，如下所示：

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

---

对于

tr

onClick，我们可以按自己喜欢的方式提供id

我们的处理函数将是如下所示的高级函数，这样我们就不需要每次都创建函数

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

}

---

键不是元素的id，而是有助于识别已修改元素的标识符（）<代码>将给出目标id。谢谢！但是，在控制台中单击表行时，如何打印id？如果采用这种方法，

处理程序

函数将接收id作为参数<代码>处理程序=（id）=>console.log（id）。为了更好地说明这一点，我编辑了答案。

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

}