Question

1

React - how to capture only parent's onClick event and not children

rated 0 times [ 4] [ 3] / answers: 1 / hits: 53261 / 9 Years ago, fri, december 18, 2015, 12:00:00

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);

},

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalaveronicab

Add To Favorites

Follow

Total Points: 3

Total Questions: 100

Total Answers: 105

Location: Guam

Member since Fri, Jun 18, 2021

3 Years ago

answered 9 Years ago monetm · Accepted Answer

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);

}