React - как захватить только родительское событие onClick, а не дочерние

У меня есть часть компонента 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 элемент, то input элемент является один, указанными в event.target собственности.

Какой лучший способ добиться этого?

Ответ 1

Поскольку вы привязываете обработчик к th, вы можете использовать свойство currentTarget. Свойство target относится к элементу, который отправил событие.

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

Ответ 2

Проверьте их

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

Ответ 3

Как это?

event.target.parentNode

Ответ 4

просто используйте event.currentTarget

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