如何在react中为表行提供唯一 ID

IT技术 javascript reactjs
2021-05-07 09:21:45

我需要为表格行提供不同的 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)
}
2个回答

为此，您需要为每个属性赋予tr一个id属性，但如果您直接将该 id 传递给函数会更好，如下所示：

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

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

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

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

对于tronClick，我们可以随意给出我们的 id，我们<tr onClick={this.handler(item.id)}> 的处理程序函数将是如下所示的高级函数，然后我们不需要每次都创建函数 

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

}

沙箱中的示例代码

其它你可能感兴趣的问题
上一篇编辑 react-select 的最后一个输入 下一篇如何使用 Chart Js 查找每年的项目总和