React-如何仅捕获父级的onClick事件而不捕获子级的事件 [英] React - how to capture only parent's onClick event and not children

问题描述

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

I have part of a React Component that looks like this:

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

第个元素的点击处理程序：

And a click handler for the th element:

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

我想捕获 th 元素。当 headerElement 是某些字符串时，它工作正常，但是当它是 input 元素时， input 元素是 event.target 属性中引用的元素。

I want to capture the th element. It works fine when headerElement is 'some string', but when it is an input element, the input element is the one referenced in the event.target property.

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

What's the best way to achieve this?

推荐答案

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

Since you are binding the handler to th you can use the currentTarget property. The target property refers to the element which dispatched the event.

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

这篇关于React-如何仅捕获父级的onClick事件而不捕获子级的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！