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是“一些字符串”时，它可以正常工作，但当它是一个input元素时，event.target属性中引用的是input元素。

怎样才能最好地达到这个目的？

- Daniel Calderon Mori

Answer 1

由于您将事件处理程序绑定到 th，因此可以使用currentTarget属性。 target属性指的是触发事件的元素。

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

- Arun P Johny

---

那个很漂亮地解决了问题，一旦我被允许，我会立即接受这个答案。 - Daniel Calderon Mori

非常快速和优雅的解决方案 - mikeg542

给一个快速有效的解决方案点个赞并留下评论！ - Azami

Answer 2

检查它们

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

- Nghiệp

Answer 3

像这样吗？

event.target.parentNode

- Bhojendra Rauniyar

---

那看起来有点繁琐。我得先进行验证。 - Daniel Calderon Mori

Answer 4

由于某些原因，被采纳的解决方案对我没有起作用。

一个可能的解决方法是给你希望从onClick事件中排除的子元素添加一个"data-value"标签。

const eg = () => {

    const clickParent = (event: React.MouseEvent) => {

        event.preventDefault();
        let dataValue = (event.target as HTMLElement).getAttribute('data-value');
        if (dataValue !== 'child') {
            console.log('parent clicked');
        };

    };

    const clickChild = (event: React.MouseEvent) => console.log('child clicked');

    return (

        <div data-value='parent' onClick={clickParent}>

            <div data-value='child' onClick={clickChild}>
            </div>

        </div>

    );


};

- Harley Lang

Answer 5

简单地使用event.currentTarget。

 onClick(e) {
    e.preventDefault();
    console.log(e.currentTarget);
}

- Sabir Hussain