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 disposer d’un moyen de le masquer à nouveau, généralement en réponse à un clic en dehors de son périmètre.
Ce modèle est particulièrement utile pour les composants tels que les fenêtres modales ou les menus coulissants.
Gestion des clics en dehors d’un élément
Supposons que vous ayez le balisage suivant dans votre application, et que vous souhaitiez fermer l’élément intérieur lorsque vous cliquez sur l’élément extérieur :
<OuterElement>
<InnerElement/>
</OuterElement>
Pour gérer les clics à l’extérieur 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é target.
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 sur la manière de gérer 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 en utilisant d’autres méthodes ou simplement utiliser un projet existant.
Gérer les clics en dehors d’un élément dans une application React
A la base de votre projet, créez un nouveau fichier appelé Home.jsx et ajoutez le code suivant pour créer une div qui doit se cacher lorsque vous cliquez sur l’élément de section.
import { useEffect, useRef } from "react";
export const Home = () => {
const outerRef = useRef();
useEffect(() => {
const handleClickOutside = (e) => {
if (outerRef.current && !outerRef.current.contains(e.target)) {
// Hide the div or perform any desired action
}
};
document.addEventListener("click", handleClickOutside);
return () => {
document.removeEventListener("click", handleClickOutside);
};
}, []);
return (
<section>
<div style={{ width: "200px", height: "200px", background: "#000" }} ref={outerRef}></div>
</section>
);
};
Ce code utilise le crochet useRef pour créer un objet nommé outerRef. Il fait ensuite référence à cet objet via la propriété ref de l’élément div.
Vous pouvez utiliser la propriété useEffect pour ajouter un récepteur d’événements à la page. L’écouteur appelle ici la fonction handleClickOutside lorsqu’un utilisateur déclenche l’événement « click ». La fonction useEffect hook renvoie également une fonction de nettoyage qui supprime l’écouteur d’événements lorsque le composant Home est démonté. Cela permet de s’assurer 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 sur l’élément qu’il référence dans un objet appelé current. Vous pouvez vérifier si l’élément div a déclenché l’écouteur en confirmant qu’il ne contient pas event.target. Si ce n’est pas le cas, vous pouvez masquer l’élément div.
Création d’un crochet personnalisé pour gérer les clics en dehors d’un composant
Un hook personnalisé vous permettrait de réutiliser cette fonctionnalité dans plusieurs composants sans avoir à la définir à chaque fois.
Ce hook devrait 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 extérieur.
Pour créer le crochet, ajoutez un nouveau fichier nommé useClickOutside à votre projet et ajoutez le code suivant :
import { useEffect } from "react";
export const useOutsideClick = (callback, ref) => {
const handleClickOutside = (event) => {
if (ref.current && !ref.current.contains(event.target)) {
callback();
}
};
useEffect(() => {
document.addEventListener("click", handleClickOutside);
return () => {
document.removeEventListener("click", handleClickOutside);
};
});
};
Ce crochet 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, il suffit de l’importer dans le composant Home et de lui passer une fonction de rappel et un objet ref.
const hideDiv = () => {
console.log("Hidden div");
};
useOutsideClick(closeModal, outerRef);
Cette approche permet d’abstraire la logique de détection des clics en dehors d’un élément et rend votre code plus facile à lire.
Améliorer 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 rejeter une modale 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 les gestionnaires d’événements de clic pour créer un crochet personnalisé que vous pouvez réutiliser dans votre application.
