javascript - React - 如何只捕获父级的 onClick 事件而不捕获子级

Question

我有一个看起来像这样的 React 组件的一部分:

var headerElement = someBoolean ? <input/> : 'some string';
return <th onClick={this._onHeaderClick}>{headerElement}</th>;

th 元素的点击处理程序:

_onHeaderClick(event) {
    event.preventDefault();
    console.log(event.target);
},

我想捕获第 th 元素。当 headerElement 是“some string”时它工作正常，但当它是 input 元素时，input 元素是 中引用的元素code>event.target 属性。

实现此目标的最佳方法是什么？

Answer 1

由于您将处理程序绑定(bind)到 th，您可以使用 currentTarget属性(property)。 target属性指的是调度事件的元素。

_onHeaderClick(event) {
    event.preventDefault();
    console.log(event.currentTarget);
}