Javascript React事件处理程序、委托

我看了一些其他的帖子，但不明白

如果我有一个大桌子，每行有一个可点击的动作按钮

<tbody>
<tr>
   <td><button onClick={this.handleClick}></button></td>
</tr>
</tbody>

---

我认为有三个不同的问题

是否有可能使用授权？是的，您可以在

上设置单个事件处理程序，并检查

事件.currentTarget.

为什么显示警告？这是因为事件对象实际上是重用的，所以如果处理程序以异步方式处理事件，比如

handleClick(event) {
    setTimeout(() => {
        alert(event.target.id);
    }, 100);
}

你不能确定这是同一个事件。您应该立即存储所需的信息，然后再使用它

handleClick(event) {
    let id_to_store = event.target.id;
    setTimeout(() => {
        alert(id_to_store);
    }, 100);
}

为什么期望我们设置显式事件处理程序而不是使用委托？授权不是更有效率吗？不是真的。一旦你不这样做，它的开销真的很小。但作为显式绑定处理程序的优点，您不必担心内存泄漏，因为处理程序被委托给了使用时间足够长的公共父元素。这是唯一的原因吗？不，处理程序集也更适合“虚拟DOM与真实DOM比较”

---

因此，您可以使用委托，但最好不要等到它真正成为瓶颈

显示

handleClick

的操作定义。如果使用事件冒泡（委派），则将事件绑定到tbody。如何从单击的行传递数据？例如，行中的每个按钮都有一个在循环中生成的唯一id。如何使用react传递事件数据？与jquery world中的操作相同：设置一些属性（最好使用

data-…=

符号来突出其用途），并从

event.currentTarget.attributes中读取它
handleClick(event) {
    let id_to_store = event.target.id;
    setTimeout(() => {
        alert(id_to_store);
    }, 100);
}