javascript - test - Ejemplo de burbujeo y captura en React.js

react listener

Question

Estoy buscando un ejemplo para manejar Bubbling y Capturing en React.js. Encontré uno con JavaScript , pero estoy teniendo problemas para encontrar el equivalente para React.js.

¿Cómo tendría que crear un ejemplo para Bubbling and Capturing en React.js?

Answer 1

Burbuja y captura son compatibles con React del mismo modo que lo describe la especificación DOM, excepto por la forma en que se trata de adjuntar manejadores.

El burbujeo es tan directo como con la DOM API normal; simplemente adjunte un controlador a un elemento primario eventual de un elemento, y cualquier evento desencadenado en ese elemento se transmitirá al padre siempre que no se detenga a través de stopPropagation en el camino:

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

La captura es igual de directa, aunque solo se menciona brevemente en los documentos . Simplemente agregue Capture al nombre de la propiedad del manejador de eventos:

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

En este caso, si handleClickViaCapturing llama a stopPropagation en el evento, no se llamará al controlador stopPropagation del botón.

Esta JSBin debería demostrar cómo funciona la captura, el burbujeo y la stopPropagation en React: https://jsbin.com/hilome/edit?js,output