A reagáló komponensen kívüli kattintások észlelése egyéni horog segítségével

Sok felhasználói felület olyan komponenseket használ, amelyek események, például gombkattintás alapján jelennek meg. Amikor ilyen összetevővel dolgozik, újra el szeretné rejteni azt, általában a határán kívüli kattintásra válaszul.

Ez a minta különösen hasznos az olyan összetevőknél, mint a modális vagy becsúsztatható menük.

Kattintások kezelése elemen kívül

Feltételezve, hogy az alábbi jelölés található az alkalmazásban, és be szeretné zárni a belső elemet, amikor a külső elemre kattint:

<Külső elem>
<InnerElement/>
Külső elem>

Az elemen kívüli kattintások kezeléséhez szükséges csatoljon eseményfigyelőt a külső elemhez. Ezután, amikor egy kattintási esemény történik, nyissa meg az eseményobjektumot, és vizsgálja meg annak céltulajdonságát.

Ha az eseménycél nem tartalmazza a belső elemet, az azt jelenti, hogy a kattintási esemény nem a belső elemen belül indult el. Ebben az esetben el kell távolítania vagy el kell rejtenie a belső elemet a DOM-ból.

Ez egy magas szintű magyarázat arra vonatkozóan, hogyan kezeli az elemen kívüli kattintásokat. Ha látni szeretné, hogyan működik ez a React alkalmazásban, akkor ezt meg kell tennie hozzon létre egy új React projektet a Vite segítségével.

A projektet más módszerekkel is létrehozhatja, vagy egyszerűen csak egy meglévő projektet használhat.

Kattintások kezelése egy elemen kívül egy React alkalmazásban

A projekt alapjában hozzon létre egy új fájlt Home.jsx és adja hozzá a következő kódot egy div létrehozásához, amelynek el kell rejtenie, amikor a szakaszelemre kattint.

import { useEffect, useRef } tól től"reagál";
exportconst Otthon = () => {
const outerRef = useRef();
 useEffect(() => {
const handleClickOutside = (e) => {
ha (outerRef.current && !outerRef.current.contains (e.target)) {
// A div elrejtése vagy a kívánt művelet végrehajtása
 }
 };
dokumentum.addEventListener("kattintás", handleClickOutside);
Visszatérés() => {
dokumentum.removeEventListener("kattintás", handleClickOutside);
 };
 }, []);
Visszatérés (

szélesség: "200px", magasság: "200px", háttér: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Ez a kód a useRef hook segítségével hoz létre egy nevű objektumot külső Ref. Ezután hivatkozik erre az objektumra a div elem ref tulajdonságán keresztül.

Használhatja a useEffect horog eseményfigyelő hozzáadásához az oldalhoz. A hallgató itt hívja a handleClickOutside funkciót, amikor a felhasználó elindítja a kattintási eseményt. A useEffect A hook egy tisztítási funkciót is visszaad, amely eltávolítja az eseményfigyelőt, amikor a Home komponens lecsatlakozik. Ez biztosítja, hogy ne legyen memóriaszivárgás.

A handleClickOutside függvény ellenőrzi, hogy az eseménycél a div elem-e. A ref objektum az aktuális nevű objektumban adja meg az általa hivatkozott elem információit. Ellenőrizheti, hogy a div elem kiváltotta-e a figyelőt, ha megerősíti, hogy nem tartalmazza az event.target elemet. Ha nem, akkor elrejtheti a div elemet.

Egyéni horog létrehozása a komponensen kívüli kattintások kezelésére

Egy egyéni hook lehetővé teszi, hogy ezt a funkciót több összetevőben újra felhasználja anélkül, hogy minden alkalommal meg kellene határoznia.

Ennek a horognak két argumentumot kell elfogadnia, egy visszahívási függvényt és egy ref objektumot.

Ebben a horogban a visszahívási függvény az a függvény, amely akkor hívódik meg, amikor a célelemen kívüli helyre kattint. A ref objektum a külső komponensre hivatkozik.

A horog létrehozásához adjon hozzá egy új nevű fájlt useClickOutside projektjéhez, és adja hozzá a következő kódot:

import { useEffect } tól től"reagál";
exportconst useOutsideClick = (visszahívás, ref) => {
const handleClickOutside = (esemény) => {
ha (ref.current && !ref.current.contains (event.target)) {
 visszahív();
 }
 };
 useEffect(() => {
dokumentum.addEventListener("kattintás", handleClickOutside);
Visszatérés() => {
dokumentum.removeEventListener("kattintás", handleClickOutside);
 };
 });
};

Ez a horog ugyanúgy működik, mint az előző kódpélda, amely külső kattintásokat észlelt a Home komponensen belül. A különbség az, hogy újra felhasználható.

Használatához importálja a home komponensbe, és adjon át egy visszahívási függvényt és egy ref objektumot.

const hideDiv = () => {
konzol.log("Rejtett div");
};
useOutsideClick (closeModal, outerRef);

Ez a megközelítés elvonatkoztatja az elemen kívüli kattintások észlelésének logikáját, és könnyebben olvashatóvá teszi a kódot.

Javítsa a felhasználói élményt az összetevőn kívüli kattintások észlelésével

Legyen szó egy legördülő menü bezárásáról, egy modális elvetésről vagy bizonyos elemek láthatóságának váltásáról, az összetevőn kívüli kattintások észlelése intuitív és zökkenőmentes felhasználói élményt biztosít. A React alkalmazásban a ref objektumok és a kattintásos eseménykezelők segítségével egyéni hookot hozhat létre, amelyet újra felhasználhat az alkalmazásban.