Cómo detectar clics fuera de un componente React usando un enlace personalizado

Muchas interfaces de usuario utilizan componentes que aparecen en función de eventos como el clic de un botón. Cuando trabaje con un componente de este tipo, querrá una forma de ocultarlo nuevamente, generalmente en respuesta a un clic fuera de su límite.

Este patrón es particularmente útil para componentes como menús modales o deslizables.

Gestión de clics fuera de un elemento

Suponiendo que tiene el siguiente marcado en su aplicación y desea cerrar el elemento interno cuando hace clic en el elemento externo:

<Elemento exterior>
<elemento interno/>
Elemento exterior>

Para gestionar los clics fuera de un elemento, debe adjuntar un detector de eventos al elemento exterior. Luego, cuando ocurra un evento de clic, acceda al objeto de evento y examine su propiedad de destino.

Si el objetivo del evento no contiene el elemento interno, significa que el evento de clic no se activó dentro del elemento interno. En este caso, debe eliminar u ocultar el elemento interno del DOM.

Esta es una explicación de alto nivel de cómo maneja los clics fuera de un elemento. Para ver cómo funcionaría esto en una aplicación React, deberá crear un nuevo proyecto React usando Vite.

Puede crear el proyecto usando otros métodos o simplemente usar un proyecto existente.

Manejo de clics fuera de un elemento en una aplicación React

En la base de su proyecto, cree un nuevo archivo llamado Inicio.jsx y agregue el siguiente código para crear un div que debería ocultarse al hacer clic en el elemento de la sección.

importar { usarEfecto, usarReferencia } de"reaccionar";
exportarconstante Inicio = () => {
constante referenciaexterna = usarRef();
 usarEfecto(() => {
constante handleClickOutside = (mi) => {
si (Ref.externa.actual && !Ref.externa.actual.contiene (e.objetivo)) {
// Ocultar el div o realizar cualquier acción deseada
 }
 };
documento.addEventListener("hacer clic", handleClickOutside);
devolver() => {
documento.removeEventListener("hacer clic", handleClickOutside);
 };
 }, []);
devolver (

ancho: "200px", altura: "200px", fondo: "#000" }} ref={referencia externa}></div>
 </section>
 );
};

Este código usa el gancho useRef para crear un objeto llamado exteriorRef. Luego hace referencia a este objeto a través de la propiedad ref del elemento div.

Puedes usar el efecto de uso gancho para agregar un detector de eventos a la página. El oyente aquí llama a la manejarHacer clicFuera función cuando un usuario activa el evento de clic. El efecto de uso hook también devuelve una función de limpieza que elimina el detector de eventos cuando se desmonta el componente Inicio. Esto asegura que no haya pérdidas de memoria.

La función handleClickOutside comprueba si el objetivo del evento es el elemento div. El objeto ref proporciona la información del elemento al que hace referencia en un objeto llamado actual. Puede verificarlo para ver si el elemento div activó el oyente al confirmar que no contiene el event.target. Si no es así, puede ocultar el div.

Creación de un enlace personalizado para gestionar los clics fuera de un componente

Un enlace personalizado le permitiría reutilizar esta funcionalidad en múltiples componentes sin tener que definirla cada vez.

Este enlace debe aceptar dos argumentos, una función de devolución de llamada y un objeto ref.

En este enlace, la función de devolución de llamada es la función que se llama cuando hace clic en el espacio fuera del elemento de destino. El objeto ref hace referencia al componente externo.

Para crear el gancho, agregue un nuevo archivo llamado useClickOutside a su proyecto y agregue el siguiente código:

importar { efecto de uso } de"reaccionar";
exportarconstante useOutsideClick = (devolución de llamada, referencia) => {
constante handleClickOutside = (evento) => {
si (ref.actual && !ref.actual.contains (event.target)) {
 llamar de vuelta();
 }
 };
 usarEfecto(() => {
documento.addEventListener("hacer clic", handleClickOutside);
devolver() => {
documento.removeEventListener("hacer clic", handleClickOutside);
 };
 });
};

Este enlace funciona de la misma manera que el ejemplo de código anterior, que detectó clics externos dentro del componente Inicio. La diferencia es que es reutilizable.

Para usarlo, impórtelo en el componente de inicio y pase una función de devolución de llamada y un objeto ref.

constante ocultarDiv = () => {
consola.registro("división oculta");
};
useOutsideClick (closeModal, externalRef);

Este enfoque abstrae la lógica de detectar clics fuera de un elemento y hace que su código sea más fácil de leer.

Mejore la experiencia del usuario mediante la detección de clics fuera de un componente

Ya sea cerrando un menú desplegable, descartando un modal o alternando la visibilidad de ciertos elementos, la detección de clics fuera de un componente permite una experiencia de usuario intuitiva y sin problemas. En React, puede usar los objetos ref y hacer clic en los controladores de eventos para crear un enlace personalizado que puede reutilizar en su aplicación.