javascript - eventos - react events

Reaccionar-Prevenir el desencadenante del evento en el padre del niño

Question

Tengo este escenario, donde cuando se hace clic en el elemento principal, se voltea para mostrar un elemento secundario con diferentes colores. Desafortunadamente, cuando el usuario hace clic en uno de los colores, también se activa el evento ''clic'' en el padre.

¿Cómo puedo detener la activación del evento en el padre cuando se hace clic en el niño?

Posibles soluciones me pregunto:

1 - CSS ? Agregar pointer-events : none clase al padre cuando se hace clic en el niño. Sin embargo, esto significaría que el padre tendrá que ser limpiado de la clase de pointer-events más adelante.

2 - ¿ Usando ref ? Registre la ref del elemento principal React y al hacer clic en el elemento secundario, compare el event.target . No me gusta esto porque no me gusta la ref global.

Pensamientos y la mejor solución serían muy apreciados. La pregunta es: ¿Cómo puedo detener el desencadenante del evento en el padre cuando se hace clic en el niño?

Answer 1

Puedes usar stopPropagation

stopPropagation : evita la propagación adicional del evento actual en la fase de propagación

var App = React.createClass({
  handleParentClick: function (e) { 
    console.log(''parent'');
  },

  handleChildClick: function (e) {
    e.stopPropagation();
    console.log(''child'');
  },

  render: function() {
    return <div>
      <p onClick={this.handleParentClick}>
        <span onClick={this.handleChildClick}>Click</span>
      </p>
    </div>;
  }
});

ReactDOM.render(<App />, document.getElementById(''root''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>