Sto cercando un esempio nella gestione di Bubbling e Capturing in React.js. Ho trovato one with JavaScript, ma non riesco a trovare l'equivalente per React.js.Esempio di gorgogliamento e cattura in React.js
Come dovrei creare un esempio per Bubbling e Capturing in React.js?
Bubbling e capture sono entrambi supportati da React nello stesso modo descritto dalle specifiche DOM, ad eccezione di come si procede al collegamento dei gestori.
Bubbling è semplice come con la normale API DOM; semplicemente collegare un gestore ad un eventuale genitore di un elemento, e tutti gli eventi innescati su quell'elemento sarà bolla per il genitore fino a quando non è fermato tramite stopPropagation lungo il percorso:
<div onClick={this.handleClick}>
<button>Click me, and my parent's `onClick` will fire!</button>
</div>
cattura è altrettanto semplice, anche se è mentioned only briefly in the docs. Basta aggiungere Capture al gestore nome della proprietà dell'evento:
<div onClickCapture={this.handleClickViaCapturing}>
<button onClick={this.handleClick}>
Click me, and my parent's `onClickCapture` will fire *first*!
</button>
</div>
In questo caso, se handleClickViaCapturing chiamate stopPropagation sull'evento, non verrà chiamato onClick gestore del pulsante.
This JSBin dovrebbe dimostrare come la cattura, spumeggiante, e stopPropagation opere in Reagire: https://jsbin.com/hilome/edit?js,output
Che cosa è da tenere a mente, tutti gli eventi di vanilla javascript, ad esempio da una libreria, vengono chiamati in anticipo. Non importa se registri l'evento in fase Capture o Bubble. – Jodo
Cosa succede se voglio il contrario? Cosa succede se ho il 'onClick' per il genitore e voglio chiamare quella funzione anche quando si fa clic su figlio? – Dane
@Dane Questo è il normale evento che bolle, come descritto nel primo dei due esempi sopra (il clickClick del div padre viene attivato quando si fa clic sul pulsante figlio). –
evento di bubbling è un concetto evento specifico DOM. L'intero punto di React è quello di allontanarsi dal DOM. Lo faresti in React creando le funzioni del componente e passandole ai bambini tramite oggetti di scena – azium
Guarda [Eventi Reazione] (https://facebook.github.io/react/docs/events.html) e [React DOM listener di eventi ] (https://facebook.github.io/react/tips/dom-event-listeners.html) –