React - 如何仅捕获父级的onClick事件而不是子级

Question

我有一个像这样的反应组件的一部分:

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

以及第th个元素的单击处理程序:

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

我想捕获de th元素.当headerElement是'some string'时它工作正常,但是当它是一个输入元素时,input元素是event.target字段中引用的元素.实现这一目标的最佳方法是什么？

Answer 1

由于您将处理程序绑定到th您可以使用currentTarget属性.将目标物业是指调度事件的元素.

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

Answer 2

检查一下

_onHeaderClick(event) {
   event.preventDefault();
   if(event.target === event.currentTarget) {
      // handle
   }
}

Answer 3

像这样？

event.target.parentNode