React表格删除功能：如何将tableItem的id传递给onClick处理函数

我一眼就看出问题出在哪了——你点击按钮时，event.target指向的其实是按钮内部的<span class="glyphicon glyphicon-trash">元素，而这个span并没有设置value属性，所以你打印出来的自然不是想要的id。下面给你几种靠谱的解决办法：

方法1：直接把id作为参数传入delete函数 #

这是最直观也最不容易出错的方式，不用依赖事件对象，直接把需要的id传给删除函数：

修改你的delete函数和按钮的onClick绑定：

delete = (id) => {
  console.log(id); // 这里直接拿到tableItem的id
}

// 按钮部分的onClick改成：
<button 
  type='submit' 
  className="btn btn-primary table-style" 
  onClick={() => this.delete(tableItem.id)}
>
  <span className="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>

这种方式的好处是逻辑清晰，不用纠结事件对象的指向问题，后续维护也更简单。

方法2：使用event.currentTarget代替event.target #

event.currentTarget永远指向绑定了事件处理函数的元素（也就是你的button），而event.target是实际触发事件的元素（这里就是span）。所以你可以修改delete函数：

delete = (event) => {
  event.preventDefault();
  console.log(event.currentTarget.value); // 现在能拿到button的value了
}

这种方式不用改太多代码，适合快速修复，但要理解target和currentTarget的区别，避免后续踩坑。

方法3：使用data-*属性（推荐语义化写法） #

value属性本来是为表单输入元素设计的，用在按钮上语义性不强，更推荐用HTML5的data-*自定义属性来存储id：

delete = (event) => {
  event.preventDefault();
  const id = event.currentTarget.dataset.id;
  console.log(id); // 获取data-id的值
}

// 按钮部分修改为：
<button 
  type='submit' 
  className="btn btn-primary table-style" 
  data-id={tableItem.id}
  onClick={this.delete}
>
  <span className="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>

这种写法更符合HTML语义规范，也能明确表示这个属性是用来存储自定义数据的，团队协作时可读性更好。

选哪种方法看你的习惯，我个人更推荐方法1或者方法3，逻辑更清晰，也不容易出现意外问题。

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