Question

在构建表格时，我将 onClick 处理程序绑定到 td 元素：

＆＃13;

<td data-person-id={person.id} onClick={this.removePerson}>
    <button type="button" className="btn btn-default btn-default">
        <span className="glyphicon glyphicon-remove" aria-hidden="true">Remove</span>
    </button>
</td>

＆＃13;

但是当处理事件时，它指向按钮或 span 元素，但不指向 td ，因此这意味着我可以＆＃39;只需获取 data-person-id 属性。我该如何解决？

完整代码https://jsfiddle.net/osqbvuub/1/

谢谢。

Answer 1

<td>
    <button 
      type="button" 
      className="btn btn-default btn-default"
      onClick={this.removePerson.bind(this, person.id)}>
        <span className="glyphicon glyphicon-remove" aria-hidden="true">Remove</span>
    </button>
</td>

让你的按钮元素处理onClick（否则你可能会有奇怪的行为，比如点击按钮外部但在td内部触发一个事件）和bind id到上下文。

然后，稍后您的removePerson功能访问id：

...
removePerson(id) {
  // do stuff
}
...

处理ReactJS中所有嵌套HTML元素中的事件

1 个答案: