Réagir empêcher la remontée d'événements dans les composants imbriqués sur cliquez sur
Voici une composante de base. À la fois le <ul>
et <li>
ont onClick fonctions. Je ne veux que le onClick sur le <li>
à 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
- J'ai eu la même question, stackoverflow.com/questions/44711549/...
Vous devez vous connecter pour publier un commentaire.
J'ai eu le même problème. J'ai trouvé stopPropagation ne travail. Je voudrais diviser l'élément de la liste dans une composante distincte, comme suit:
this.props.handleClick()
dansListItem
de la composantethis.props.click
?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.
document.addEventListener('click')
combiné avec réagissent deonClick
Ce n'est pas 100% idéal, mais si c'est trop de douleur à col vers le bas
props
chez les enfants -> les enfants de mode ou de créer unContext.Provider
/Context.Consumer
juste dans ce but), et vous travaillez avec une autre bibliothèque qui dispose de son propre gestionnaire, il s'exécute avant le vôtre, vous pouvez aussi essayer:De ce que je comprends, le
event.persist
méthode empêche un objet d'être immédiatement restitués à Réagir deSyntheticEvent
piscine. Donc, de ce fait, leevent
passé à Réagir en réalité n'existe pas au moment où vous l'atteindre! Ce qui se passe dans nos petits-enfants à cause de la façon de Réagir de la poignée de choses en interne par vérifier d'abord les parents sur vers le bas pourSyntheticEvent
gestionnaires (surtout si le parent avait un rappel).Aussi longtemps que vous ne faites pas appel
persist
sur quelque chose qui permettrait de créer de mémoire importante pour continuer à créer des événements tels queonMouseMove
(et vous n'êtes pas la création d'une sorte de Cookie Clicker jeu comme la grand-mère de Cookies), il doit être parfaitement bien!Également à noter: à partir de la lecture autour de leur GitHub parfois, nous devons garder nos yeux pour les futures versions de Réagir comme ils peut finalement résoudre certains de la douleur avec ce qu'ils semblent aller vers la réalisation de pliage Réagir code dans un compilateur/transpiler.
J'ai eu des problèmes à obtenir
event.stopPropagation()
de travail. Si vous aussi, essayez de le déplacer vers le haut de votre fonction de gestionnaire de clic, c'était ce que je devais faire pour arrêter l'épreuve en cours de propagation. Exemple de fonction:Vous pouvez éviter la remontée d'événements en cochant la cible de l'événement.
Par exemple, si vous avez entrée imbriquées à l'élément div où vous avez cliquez sur gestionnaire pour l'événement, et vous ne voulez pas gérer ça, quand l'entrée est cliqué, vous pouvez juste passer
event.target
dans votre gestionnaire et de vérification est gestionnaire doit être exécuté sur la base des propriétés de la cible.Par exemple, vous pouvez vérifier
if (target.localName === "input") { return}
.Donc, c'est un moyen "d'éviter le" gestionnaire d'exécution
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 appel
preventDefault();
.