web-dev-qa-db-fra.com

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

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?

23

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);
}
52
Arun P Johny

Les vérifier

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

Comme ça?

event.target.parentNode
5
Bhojendra Rauniyar

utilisez simplement event.currentTarget

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