Como detectar cliques fora de um componente React usando um gancho personalizado

Muitas interfaces de usuário usam componentes que aparecem com base em eventos como um clique de botão. Ao trabalhar com tal componente, você desejará uma maneira de ocultá-lo novamente, geralmente em resposta a um clique fora de seu limite.

Esse padrão é particularmente útil para componentes como modais ou menus deslizantes.

Manipulando cliques fora de um elemento

Supondo que você tenha a seguinte marcação em seu aplicativo e queira fechar o elemento interno ao clicar no elemento externo:

<OuterElement>
<InnerElement/>
OuterElement>

Para lidar com cliques fora de um elemento, você precisa anexar um ouvinte de evento ao elemento exterior. Em seguida, quando ocorrer um evento de clique, acesse o objeto de evento e examine sua propriedade de destino.

Se o destino do evento não contiver o elemento interno, isso significa que o evento de clique não foi acionado no elemento interno. Nesse caso, você deve remover ou ocultar o elemento interno do DOM.

Esta é uma explicação de alto nível de como você lida com cliques fora de um elemento. Para ver como isso funcionaria em um aplicativo React, você precisará crie um novo projeto React usando o Vite.

Você pode criar o projeto usando outros métodos ou simplesmente usar um projeto existente.

Manipulando cliques fora de um elemento em um aplicativo React

Na base do seu projeto, crie um novo arquivo chamado Home.jsx e adicione o código a seguir para criar um div que deve ser ocultado quando você clicar no elemento da seção.

importar { useEffect, useRef } de"reagir";
exportarconst Casa = () => {
const refexterna = useRef();
 useEffect(() => {
const handleClickOutside = (e) => {
se (outerRef.current && !outerRef.current.contains (e.target)) {
// Oculte o div ou execute qualquer ação desejada
 }
 };
documento.addEventListener("clique", handleClickOutside);
retornar() => {
documento.removeEventListener("clique", handleClickOutside);
 };
 }, []);
retornar (

largura: "200 px", altura: "200 px", fundo: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Este código usa o gancho useRef para criar um objeto chamado ref externa. Em seguida, ele faz referência a esse objeto por meio da propriedade ref do elemento div.

Você pode usar o useEffect gancho para adicionar um ouvinte de evento à página. O ouvinte aqui chama o handleClickOutside função quando um usuário aciona o evento click. O useEffect hook também retorna uma função de limpeza que remove o ouvinte de eventos quando o componente Home é desmontado. Isso garante que não haja vazamentos de memória.

A função handleClickOutside verifica se o destino do evento é o elemento div. O objeto ref fornece as informações do elemento ao qual ele faz referência em um objeto chamado current. Você pode verificá-lo para ver se o elemento div acionou o ouvinte, confirmando que ele não contém o event.target. Caso contrário, você pode ocultar o div.

Criando um gancho personalizado para lidar com cliques fora de um componente

Um gancho personalizado permitiria que você reutilizasse essa funcionalidade em vários componentes sem precisar defini-la sempre.

Esse gancho deve aceitar dois argumentos, uma função de retorno de chamada e um objeto ref.

Neste gancho, a função de retorno de chamada é a função chamada quando você clica no espaço fora do elemento de destino. O objeto ref referencia o componente externo.

Para criar o gancho, adicione um novo arquivo chamado useClickOutside ao seu projeto e adicione o seguinte código:

importar { useEffect } de"reagir";
exportarconst useOutsideClick = (retorno de chamada, referência) => {
const handleClickOutside = (evento) => {
se (ref.current && !ref.current.contains (event.target)) {
 ligar de volta();
 }
 };
 useEffect(() => {
documento.addEventListener("clique", handleClickOutside);
retornar() => {
documento.removeEventListener("clique", handleClickOutside);
 };
 });
};

Esse gancho funciona da mesma forma que o exemplo de código anterior, que detectou cliques externos dentro do componente Home. A diferença é que é reutilizável.

Para usá-lo, importe-o no componente home e passe uma função callback e um objeto ref.

const esconderDiv = () => {
console.registro("div oculto");
};
useOutsideClick (closeModal, outerRef);

Essa abordagem abstrai a lógica de detecção de cliques fora de um elemento e facilita a leitura do código.

Melhore a experiência do usuário detectando cliques fora de um componente

Seja fechando um menu suspenso, descartando um modal ou alternando a visibilidade de determinados elementos, a detecção de cliques fora de um componente permite uma experiência de usuário intuitiva e contínua. No React, você pode usar os objetos ref e clicar em manipuladores de eventos para criar um gancho personalizado que pode ser reutilizado em seu aplicativo.