Comment détecter les clics en dehors d'un composant React à l'aide d'un hook personnalisé

De nombreuses interfaces utilisateur utilisent des composants qui apparaissent en fonction d'événements tels qu'un clic sur un bouton. Lorsque vous travaillez avec un tel composant, vous souhaitez un moyen de le masquer à nouveau, généralement en réponse à un clic en dehors de ses limites.

Ce modèle est particulièrement utile pour les composants tels que les modaux ou les menus déroulants.

Gestion des clics en dehors d'un élément

En supposant que vous ayez le balisage suivant dans votre application et que vous souhaitiez fermer l'élément interne lorsque vous cliquez sur l'élément externe :

<ElémentExterne>
<Élémentintérieur/>
ElémentExterne>

Pour gérer les clics en dehors d'un élément, vous devez attacher un écouteur d'événement à l'élément extérieur. Ensuite, lorsqu'un événement de clic se produit, accédez à l'objet événement et examinez sa propriété cible.

Si la cible de l'événement ne contient pas l'élément interne, cela signifie que l'événement de clic n'a pas été déclenché dans l'élément interne. Dans ce cas, vous devez supprimer ou masquer l'élément interne du DOM.

Il s'agit d'une explication de haut niveau de la façon dont vous gérez les clics en dehors d'un élément. Pour voir comment cela fonctionnerait dans une application React, vous devrez créer un nouveau projet React en utilisant Vite.

Vous pouvez créer le projet à l'aide d'autres méthodes ou simplement utiliser un projet existant.

Gestion des clics en dehors d'un élément dans une application React

A la base de votre projet, créez un nouveau fichier appelé Accueil.jsx et ajoutez le code suivant pour créer un div qui doit se cacher lorsque vous cliquez sur l'élément section.

importer { useEffect, useRef } depuis"réagir";
exporterconstante Accueil = () => {
constante RéfExterne = useRef();
 useEffet(() => {
constante handleClickOutside = (e) => {
si (outerRef.current && !outerRef.current.contains (e.target)) {
// Masquez la div ou effectuez l'action souhaitée
 }
 };
document.addEventListener("Cliquez sur", handleClickOutside);
retour() => {
document.removeEventListener("Cliquez sur", handleClickOutside);
 };
 }, []);
retour (

largeur: "200px", hauteur: "200px", arrière-plan: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Ce code utilise le hook useRef pour créer un objet nommé RéfExterne. Il référence ensuite cet objet via la propriété ref de l'élément div.

Vous pouvez utiliser le utiliserEffet crochet pour ajouter un écouteur d'événement à la page. L'auditeur appelle ici le handleClickOutside fonction lorsqu'un utilisateur déclenche l'événement de clic. Le utiliserEffet hook renvoie également une fonction de nettoyage qui supprime l'écouteur d'événement lorsque le composant Home se démonte. Cela garantit qu'il n'y a pas de fuites de mémoire.

La fonction handleClickOutside vérifie si la cible de l'événement est l'élément div. L'objet ref fournit les informations de l'élément auquel il fait référence dans un objet appelé courant. Vous pouvez le vérifier pour voir si l'élément div a déclenché l'écouteur en confirmant qu'il ne contient pas l'événement.target. Si ce n'est pas le cas, vous pouvez masquer la div.

Création d'un crochet personnalisé pour gérer les clics en dehors d'un composant

Un crochet personnalisé vous permettrait de réutiliser cette fonctionnalité dans plusieurs composants sans avoir à la définir à chaque fois.

Ce hook doit accepter deux arguments, une fonction de rappel et un objet ref.

Dans ce crochet, la fonction de rappel est la fonction qui est appelée lorsque vous cliquez sur l'espace en dehors de l'élément cible. L'objet ref fait référence au composant externe.

Pour créer le crochet, ajoutez un nouveau fichier nommé useClickOutside à votre projet et ajoutez le code suivant :

importer { useEffet } depuis"réagir";
exporterconstante useOutsideClick = (rappel, réf) => {
constante handleClickOutside = (événement) => {
si (ref.current && !ref.current.contains (event.target)) {
 rappeler();
 }
 };
 useEffet(() => {
document.addEventListener("Cliquez sur", handleClickOutside);
retour() => {
document.removeEventListener("Cliquez sur", handleClickOutside);
 };
 });
};

Ce hook fonctionne de la même manière que l'exemple de code précédent, qui détectait les clics extérieurs à l'intérieur du composant Home. La différence est qu'il est réutilisable.

Pour l'utiliser, importez-le dans le composant home et transmettez une fonction de rappel et un objet ref.

constante cacherDiv = () => {
console.enregistrer("Division cachée");
};
useOutsideClick (closeModal, outerRef);

Cette approche fait abstraction de la logique de détection des clics en dehors d'un élément et rend votre code plus facile à lire.

Améliorez l'expérience utilisateur en détectant les clics en dehors d'un composant

Qu'il s'agisse de fermer un menu déroulant, de supprimer un modal ou de basculer la visibilité de certains éléments, la détection des clics en dehors d'un composant permet une expérience utilisateur intuitive et transparente. Dans React, vous pouvez utiliser les objets ref et cliquer sur les gestionnaires d'événements pour créer un crochet personnalisé que vous pouvez réutiliser dans votre application.