Comment puis-je détecter les clics en dehors d'un composant React ?

Détecter les clics en dehors du composant React

Le scénario présenté implique la détection d'événements de clic se produisant en dehors d'un composant spécifique. La méthode la plus proche() de jQuery vérifie généralement si la cible de l'événement de clic a l'élément DOM du composant comme parent, indiquant un clic dans le composant.

Implémentation ES6

La méthode fournie La solution ES6 utilise le hook useOutsideAlerter, qui prend une référence comme argument. Dans le hook, un gestionnaire de clics est ajouté au document. Lorsqu'un clic se produit, la cible est comparée à l'élément actuel de la référence. Si la cible n'est pas contenue dans le composant, une alerte s'affiche.

Le composant OutsideAlerter encapsule le contenu enfant et applique le hook à la référence de son conteneur. Lorsque vous cliquez en dehors du conteneur, une alerte est déclenchée.

Implémentation basée sur les classes (après React 16.3)

Dans cette implémentation, le composant OutsideAlerter étend le composant et définit le cycle de vie méthodes. Les méthodes ComponentDidMount et ComponentWillUnmount ajoutent et suppriment respectivement le gestionnaire de clics du document. La méthode handleClickOutside vérifie les clics en dehors du composant, affichant une alerte si nécessaire.

Implémentation basée sur les classes (avant React 16.3)

Une approche légèrement différente est utilisée avant pour réagir 16.3. Le composant a une méthode setWrapperRef qui définit la référence du wrapper. La méthode handleClickOutside vérifie les clics en dehors du composant, affichant une alerte si nécessaire.

Quelle que soit l'implémentation, ces solutions permettent de détecter les événements de clic en dehors d'un composant React spécifique, offrant ainsi un contrôle amélioré sur les interactions utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!