web-dev-qa-db-fra.com

React - Empêcher le déclenchement d'événements sur le parent de l'enfant

J'ai ce scénario, où lorsque l'élément parent est cliqué, il bascule pour afficher un élément enfant avec des couleurs différentes. Malheureusement, lorsque l'utilisateur clique sur l'une des couleurs, l'événement 'clic' sur le parent est également déclenché.

Comment puis-je arrêter le déclencheur d'événement sur le parent lorsque l'utilisateur clique sur l'enfant?

Solutions possibles je me demande:

1 -CSS? Ajoutez la classe pointer-events : none au parent lorsque l'utilisateur clique sur l'enfant. Cependant, cela signifierait que le parent devra être nettoyé de la classe pointer-events plus tard.

2 - En utilisant Ref ? Enregistrez la ref de l’élément parent React & en cliquant sur l’enfant, comparez le event.target à la réf? Je n'aime pas cela parce que je n'aime pas la variable globale ref. 

Les pensées et la meilleure solution seraient grandement appréciées. La question est la suivante: Comment puis-je arrêter le déclencheur d'événement sur le parent lorsque l'utilisateur clique sur l'enfant?

javascriptcsseventsreactjsjavascript-events
23
Kayote

Vous pouvez utiliser stopPropagation

stopPropagation - Empêche la propagation de l'événement en cours dans la phase bouillonnante

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>

46
Alexander T.

Je voulais invoquer des fonctions sur des accessoires, mais en même temps, je voulais arrêter la propagation d'événements d'enfant à parent, voici comment cela est géré 

class LabelCancelable extends Component {

  handleChildClick(e) {
    e.stopPropagation()
  }
  closeClicked(e, props) {
    e.stopPropagation();
    props.onCloseClicked()
  }

  render() {
    const {displayLabel} = this.props;
    return (
      <span className={ "label-wrapper d-inline-block pr-2 pl-2 mr-2 mb-2" } onClick={ this.handleChildClick }>
          <button type="button" className="close cursor-pointer ml-2 float-right" aria-label="Close"
              onClick={(e) => this.closeClicked(e, this.props) }>
              <span aria-hidden="true">&times;</span>
          </button>
          <span className="label-text fs-12">
            { displayLabel }
          </span>
      </span>
    );
  }
}

export default LabelCancelable;
0
Mayur Nandane