web-dev-qa-db-ja.com

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プロパティで参照される要素です。

これを達成する最良の方法は何ですか？

javascriptdomreactjs
32
Daniel Calderon Mori

ハンドラをthにバインドしているため、 currentTarget プロパティを使用できます。 target プロパティは、イベントをディスパッチした要素を参照します。

_onHeaderClick(event) {
    event.preventDefault();
    console.log(event.currentTarget);
}
64
Arun P Johny

それらを確認してください

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

このような？

event.target.parentNode
5
Bhojendra Rauniyar

event.currentTarget を使用するだけです

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