Réagir empêcher la remontée d'événements dans les composants imbriqués sur cliquez sur

Question

Voici une composante de base. À la fois l' <ul> et <li> ont onClick fonctions. Je ne veux que le onClick sur l' <li> de le feu, pas le <ul>. Comment puis-je y parvenir?

J'ai joué avec e.preventDefault(), e.stopPropagation(), en vain.

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

J'ai eu le même problème. J'ai trouvé stopPropagation n' travail. Je voudrais diviser l'élément de la liste dans une composante distincte, comme suit:

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 2

Réagir utilise événement délégation avec un seul écouteur d'événement sur le document pour les événements de la bulle, à l'instar de "clic" dans cet exemple, ce qui signifie l'arrêt de la propagation n'est pas possible; l'événement réel a déjà multiplié par le temps de vous interagissez avec elle de Réagir. stopPropagation sur Réagir synthétique de l'événement est possible en raison de Réagir poignées de propagation de la synthèse des événements en interne.

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

Answer 3

La nouvelle façon de faire est beaucoup plus simple et vous permettra d'économiser un peu de temps! Il suffit de passer l'événement dans l'original, cliquez sur gestionnaire et appelez - preventDefault();.

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