React - comment capturer uniquement l'événement onClick du parent et non les enfants

Question

J'ai une partie d'un composant de réaction comme ceci:

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

Et un gestionnaire de clic pour l'élément th:

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

Je veux capturer le troisième élément. Cela fonctionne bien lorsque headerElement est 'une chaîne', mais lorsqu'il s'agit d'un élément input, l'élément input est celui référencé dans le champ event.target. Quel est le meilleur moyen d'y parvenir?

Answer 1

Puisque vous liez le gestionnaire à th, vous pouvez utiliser la propriété currentTarget . La propriété target fait référence à l'élément qui a envoyé l'événement.

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

Answer 2

Les vérifier

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

Answer 3

Comme ça?

event.target.parentNode

Answer 4

utilisez simplement event.currentTarget

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