reactjs - react - Reaccione para evitar el evento que burbujea en componentes anidados al hacer clic

reactjs handle click

Question

Aquí hay un componente básico. Tanto <ul> como <li> tienen funciones onClick. Solo quiero que se active onClick en <li> , no <ul> . ¿Cómo puedo conseguir esto?

He jugado con e.preventDefault (), e.stopPropagation (), en vano.

class List extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    // do something
  }

  render() {

    return (
      <ul 
        onClick={(e) => {
          console.log(''parent'');
          this.handleClick();
        }}
      >
        <li 
          onClick={(e) => {
            console.log(''child'');
            // prevent default? prevent propagation?
            this.handleClick();
          }}
        >
        </li>       
      </ul>
    )
  }
}

// => parent
// => child

Answer 1

¡La nueva forma de hacerlo es mucho más simple y le ahorrará algo de tiempo! Simplemente pase el evento al controlador de clics original y llame a preventDefault(); .

clickHandler(e){
    e.preventDefault();
    //Your functionality here
}

Answer 2

Esto no es 100% ideal, pero si es demasiado doloroso pasar props en niños -> moda infantil o crear un Context.Provider / Context.Consumer solo para este propósito), y está tratando con otra biblioteca que tiene su propio controlador que se ejecuta antes que el tuyo, también puedes probar:

   function myHandler(e) { 
        e.persist(); 
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation(); 
   }

Por lo que entiendo, el método event.persist evita que un objeto sea arrojado de inmediato al grupo SyntheticEvent de React. ¡Por eso, el event pasado en React en realidad no existe para cuando lo alcanzas! Esto sucede en los nietos debido a la forma en que React maneja las cosas internamente al verificar primero los padres para los controladores SyntheticEvent (especialmente si el padre tuvo una devolución de llamada).

Siempre y cuando no esté llamando persist en algo que crearía una memoria significativa para seguir creando eventos como onMouseMove (y no está creando algún tipo de juego Cookie Clicker como Grandma''s Cookies), ¡debería estar perfectamente bien!

También tenga en cuenta: de leer alrededor de su GitHub de vez en cuando, deberíamos estar atentos a futuras versiones de React, ya que eventualmente pueden resolver algo del dolor con esto, ya que parece que van a hacer que el código React se pliegue en un compilador / transpilador.

Answer 3

Puede evitar la propagación de eventos marcando el destino del evento.
Por ejemplo, si tiene una entrada anidada en el elemento div donde tiene un controlador para el evento de clic, y no desea manejarlo, cuando se hace clic en la entrada, puede pasar event.target a su controlador y verificar si el controlador debe ser ejecutado en función de las propiedades del objetivo.
Por ejemplo, puede verificar if (target.localName === "input") { return} .
Entonces, es una forma de "evitar" la ejecución del controlador

Answer 4

React utiliza la delegación de eventos con un único detector de eventos en el documento para eventos que burbujean, como ''hacer clic'' en este ejemplo, lo que significa que no es posible detener la propagación; el evento real ya se ha propagado cuando interactúas con él en React. stopPropagation en el evento sintético de React es posible porque React maneja la propagación de eventos sintéticos internamente.

stopPropagation: function(e){
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
}

Answer 5

Tuve el mismo problema. Encontré que stopPropagation funcionó. Dividiría el elemento de la lista en un componente separado, así:

class List extends React.Component {
  handleClick = e => {
    // do something
  }

  render() {
    return (
      <ul onClick={this.handleClick}>
        <ListItem onClick={this.handleClick}>Item</ListItem> 
      </ul>
    )
  }
}

class ListItem extends React.Component {
  handleClick = e => {
    e.stopPropagation();
    this.props.onClick();
  }

  render() {
    return (
      <li onClick={this.handleClick}>
        {this.props.children}
      </li>       
    )
  }
}

Answer 6

Tuve problemas para que event.stopPropagation() funcionara. Si también lo hace, intente moverlo a la parte superior de su función de controlador de clics, eso era lo que tenía que hacer para evitar que el evento burbujeara. Función de ejemplo:

  toggleFilter(e) {
    e.stopPropagation(); // If moved to the end of the function, will not work
    let target = e.target;
    let i = 10; // Sanity breaker

    while(true) {
      if (--i === 0) { return; }
      if (target.classList.contains("filter")) {
        target.classList.toggle("active");
        break;
      }
      target = target.parentNode;
    }
  }