Esempio di Bubbling e cattura in React.js

Sto cercando un esempio nella gestione di Bubbling e Capturing in React.js. Ne ho trovato uno con JavaScript , ma ho difficoltà a trovare l’equivalente per 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, eccetto per come si collegano i gestori.

Bubbling è semplice come con la normale API DOM; semplicemente collega un gestore ad un eventuale genitore di un elemento, e qualsiasi evento innescato su quell’elemento bolla al genitore finché non viene fermato tramite stopPropagation lungo il percorso:

 

Catturare è altrettanto semplice, anche se è citato solo brevemente nei documenti . Aggiungi semplicemente Capture al nome della proprietà del gestore di eventi:

 

In questo caso, se handleClickViaCapturing chiama stopPropagation sull’evento, il gestore onClick del pulsante non verrà chiamato.

Questo JSBin dovrebbe dimostrare come funziona capturing, bubbling e stopPropagation in React: https://jsbin.com/hilome/edit?js,output