React.js中点击编辑按钮时如何获取对应表格行的id？

问题原因 #

1. 你当前的onClick={editStudent(this.id)}写法会在组件渲染阶段就直接执行editStudent函数，不是点击按钮时才触发，且函数组件中this指向为undefined，无法拿到按钮的id属性。
2. 按钮的id属性现在是写死的'1'，没有和每行学生对象的id做绑定。

解决方法 #

有两种实现方式，都可以满足你打印对应id的需求：

方式1（更推荐，不依赖DOM属性）

直接把遍历得到的每行学生对象的id传入editStudent，修改map渲染里的编辑按钮代码即可：

<Button 
  variant = 'outlined' 
  onClick={() => editStudent(row.id)} 
  style={{color : 'yellow', border : '1px solid yellow', marginRight : '10px'}}
>
  Edit
</Button>

方式2（按你的要求使用按钮id属性实现）

给按钮绑定对应学生的id，点击时通过事件对象拿到按钮的id属性传入函数：

<Button 
  id={row.id}
  variant = 'outlined' 
  onClick={(e) => editStudent(e.target.id)} 
  style={{color : 'yellow', border : '1px solid yellow', marginRight : '10px'}}
>
  Edit
</Button>

注意 #

请确保你存在localStorage中的student数组里的每个学生对象都有id字段，如果你的id字段名不是id，把上面代码里的row.id替换成你实际的字段名即可。

内容的提问来源于stack exchange，提问作者Mohammad Faateh