web-dev-qa-db-fra.com

Exemple de création de bulles et de capture dans React.js

Je cherche un exemple pour gérer Bubbling et Capturing dans React.js. J'ai trouvé n avec JavaScript , mais j'ai du mal à trouver l'équivalent pour React.js.

Comment devrais-je créer un exemple de bulles et de capture dans React.js?

javascriptreactjsevent-bubblingevent-capturing
28
Socrates

Le bouillonnement et la capture sont tous deux pris en charge par React de la même manière que celle décrite par la spécification DOM, sauf pour la façon dont vous allez attacher les gestionnaires.

Le bullage est aussi simple qu'avec l'API DOM normale; attachez simplement un gestionnaire à un parent éventuel d'un élément, et tous les événements déclenchés sur cet élément se propageront au parent tant qu'il n'est pas arrêté via stopPropagation en cours de route:

<div onClick={this.handleClick}>
  <button>Click me, and my parent's `onClick` will fire!</button>
</div>

La capture est tout aussi simple, bien que ce soit mentionné seulement brièvement dans la documentation . Ajoutez simplement Capture au nom de la propriété du gestionnaire d'événements:

<div onClickCapture={this.handleClickViaCapturing}>
  <button onClick={this.handleClick}>
    Click me, and my parent's `onClickCapture` will fire *first*!
  </button>
</div>

Dans ce cas, si handleClickViaCapturing appelle stopPropagation sur l'événement, le gestionnaire onClick du bouton ne sera pas appelé.

Ce JSBin devrait montrer comment la capture, le bullage et stopPropagation fonctionnent dans React: https://jsbin.com/hilome/edit?js,output

69
Michelle Tilley