Jak wykrywać kliknięcia poza komponentem React za pomocą niestandardowego haka

Wiele interfejsów użytkownika wykorzystuje komponenty, które pojawiają się na podstawie zdarzeń, takich jak kliknięcie przycisku. Kiedy pracujesz z takim komponentem, będziesz potrzebować sposobu na ponowne ukrycie go, zwykle w odpowiedzi na kliknięcie poza jego granicami.

Ten wzorzec jest szczególnie przydatny w przypadku komponentów, takich jak moduły lub wysuwane menu.

Obsługa kliknięć poza elementem

Zakładając, że masz w aplikacji następujące znaczniki i chcesz zamknąć element wewnętrzny po kliknięciu elementu zewnętrznego:

<Element zewnętrzny>
<Element wewnętrzny/>
Element zewnętrzny>

Aby obsłużyć kliknięcia poza elementem, musisz to zrobić dołącz detektor zdarzeń do elementu zewnętrznego. Następnie, gdy wystąpi zdarzenie kliknięcia, uzyskaj dostęp do obiektu zdarzenia i sprawdź jego właściwość target.

Jeśli cel zdarzenia nie zawiera elementu wewnętrznego, oznacza to, że zdarzenie kliknięcia nie zostało wywołane w elemencie wewnętrznym. W takim przypadku należy usunąć lub ukryć element wewnętrzny z DOM.

To ogólne wyjaśnienie obsługi kliknięć poza elementem. Aby zobaczyć, jak to zadziała w aplikacji React, musisz to zrobić utwórz nowy projekt React za pomocą Vite.

Możesz utworzyć projekt przy użyciu innych metod lub po prostu użyć istniejącego projektu.

Obsługa kliknięć poza elementem w aplikacji React

U podstawy projektu utwórz nowy plik o nazwie Strona główna.jsx i dodaj następujący kod, aby utworzyć element div, który powinien się ukrywać po kliknięciu elementu sekcji.

import { useEffect, useRef } z"reagować";
eksportkonst Strona główna = () => {
konst ZewnętrznyRef = użyjRef();
 użyjEfekt(() => {
konst handleClickOutside = (mi) => {
Jeśli (outerRef.current && !outerRef.current.contains (e.target)) {
// Ukryj element div lub wykonaj dowolną akcję
 }
 };
dokument.addEventListener("Kliknij", handleClickOutside);
powrót() => {
dokument.removeEventListener("Kliknij", handleClickOutside);
 };
 }, []);
powrót (

szerokość: „200 pikseli”, wysokość: „200 pikseli”, tło: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Ten kod używa haka useRef do utworzenia obiektu o nazwie Zewnętrzny ref. Następnie odwołuje się do tego obiektu poprzez właściwość ref elementu div.

Możesz użyć UżyjEfekt hook, aby dodać detektor zdarzeń do strony. Słuchacz tutaj nazywa uchwytKliknij na zewnątrz funkcja, gdy użytkownik wyzwala zdarzenie kliknięcia. The UżyjEfekt hook zwraca również funkcję czyszczenia, która usuwa detektor zdarzeń po odmontowaniu komponentu Home. Gwarantuje to brak wycieków pamięci.

Funkcja handleClickOutside sprawdza, czy celem zdarzenia jest element div. Obiekt ref dostarcza informacji o elemencie, do którego się odwołuje w obiekcie o nazwie current. Możesz sprawdzić, czy element div uruchomił detektor, potwierdzając, że nie zawiera zdarzenia.target. Jeśli nie, możesz ukryć element div.

Tworzenie niestandardowego haka do obsługi kliknięć poza komponentem

Niestandardowy hak umożliwiłby ponowne użycie tej funkcji w wielu komponentach bez konieczności definiowania jej za każdym razem.

Ten hak powinien akceptować dwa argumenty, funkcję wywołania zwrotnego i obiekt ref.

W tym haku funkcja wywołania zwrotnego jest wywoływana po kliknięciu spacji poza elementem docelowym. Obiekt ref odwołuje się do komponentu zewnętrznego.

Aby utworzyć hak, dodaj nowy plik o nazwie użyjClickOutside do swojego projektu i dodaj następujący kod:

import {efekt użycia} z"reagować";
eksportkonst useOutsideClick = (oddzwonienie, ref) => {
konst handleClickOutside = (wydarzenie) => {
Jeśli (ref.current && !ref.current.contains (event.target)) {
 oddzwonić();
 }
 };
 użyjEfekt(() => {
dokument.addEventListener("Kliknij", handleClickOutside);
powrót() => {
dokument.removeEventListener("Kliknij", handleClickOutside);
 };
 });
};

Ten hak działa tak samo, jak poprzedni przykładowy kod, który wykrył zewnętrzne kliknięcia wewnątrz komponentu Home. Różnica polega na tym, że jest wielokrotnego użytku.

Aby go użyć, zaimportuj go do komponentu domowego i przekaż funkcję wywołania zwrotnego oraz obiekt ref.

konst ukryjDiv = () => {
konsola.dziennik(„Ukryty element div”);
};
useOutsideClick (closeModal, externalRef);

Takie podejście streszcza logikę wykrywania kliknięć poza elementem i sprawia, że ​​kod jest łatwiejszy do odczytania.

Popraw wrażenia użytkownika, wykrywając kliknięcia poza komponentem

Niezależnie od tego, czy zamykasz menu rozwijane, odrzucasz modal, czy przełączasz widoczność niektórych elementów, wykrywanie kliknięć poza komponentem zapewnia intuicyjną i bezproblemową obsługę. W React możesz użyć obiektów ref i obsługi zdarzeń kliknięć, aby utworzyć niestandardowy hak, którego możesz ponownie użyć w swojej aplikacji.