1
votes

ne pas appeler la fonction si un élément imbriqué a été cliqué

J'ai un composant avec un composant imbriqué, comme ceci:

<div id="bla" onClick={() => this.handleOnClick(this.props.someParameter, this.state.someState, {id})}>
    <div class="wrapper">
    <ChildComponent />
    </div>
    ....

Le composant imbriqué est techniquement une icône et il a sa propre fonction handleOnClick.

Si je clique sur l'icône du composant enfant, les deux fonctions handleOnClick sont appelées. Mais je veux appeler uniquement la fonction du composant enfant. Y a-t-il un moyen de faire cela?

javascript reactjs

1 commentaires

Dans l'événement onclick du composant imbriqué, vous pouvez faire e.stopPropagation ()

3 Réponses :

2
votes

Vous devez utiliser event # stopPropagation .

Sur la fonction handleOnClick de votre composant enfant, appelez-la simplement comme suit:

handleOnClick = function(e) {
    e.stopPropagation();
    ...rest of your code
}

Je n'ai pas travaillé avec react, mais cela devrait fonctionner. p>

0 commentaires

2
votes

L'utilisation de event.stopPropagation (); dans la fonction onClick de votre composant enfant résoudra votre problème.

Cette méthode empêchera l'événement de se propager à votre composant parent

childOnClick = event => {
    event.stopPropagation();
    //.... your code
}

0 commentaires

2
votes

Dans le gestionnaire d'événements de votre composant enfant, assurez-vous d'arrêter la propagation de l'événement pour qu'il ne se propage pas jusqu'à la div parent en appelant event.stopPropagation ()

class ChildComponent extends React {

  handleChange(event) {
    event.stopPropagation();
  }

  render() {
    return (
        <div>
        <button onClick={this.handleChange}></button>
       </div>
    );
  }
}

0 commentaires