Ako zistiť kliknutia mimo komponentu React pomocou vlastného háku

Mnoho používateľských rozhraní používa komponenty, ktoré sa zobrazujú na základe udalostí, ako je napríklad kliknutie na tlačidlo. Keď pracujete s takýmto komponentom, budete chcieť spôsob, ako ho znova skryť, zvyčajne v reakcii na kliknutie mimo jeho hraníc.

Tento vzor je obzvlášť užitočný pre komponenty, ako sú modály alebo vysúvacie ponuky.

Spracovanie kliknutí mimo prvku

Za predpokladu, že máte vo svojej aplikácii nasledujúce označenie a po kliknutí na vonkajší prvok chcete zatvoriť vnútorný prvok:

<Vonkajší prvok>
<InnerElement/>
Vonkajší prvok>

Ak chcete spracovať kliknutia mimo prvku, musíte to urobiť pripojiť poslucháč udalosti k vonkajšiemu prvku. Potom, keď dôjde k udalosti kliknutia, prejdite k objektu udalosti a preskúmajte jeho cieľovú vlastnosť.

Ak cieľ udalosti neobsahuje vnútorný prvok, znamená to, že udalosť kliknutia nebola spustená v rámci vnútorného prvku. V tomto prípade by ste mali odstrániť alebo skryť vnútorný prvok z DOM.

Toto je podrobné vysvetlenie toho, ako spracovávate kliknutia mimo prvku. Ak chcete vidieť, ako by to fungovalo v aplikácii React, musíte to urobiť vytvorte nový projekt React pomocou Vite.

Projekt môžete vytvoriť pomocou iných metód alebo jednoducho použiť existujúci projekt.

Spracovanie kliknutí mimo prvku v aplikácii React

V základe svojho projektu vytvorte nový súbor s názvom Home.jsx a pridajte nasledujúci kód na vytvorenie prvku div, ktorý by sa mal skryť po kliknutí na prvok sekcie.

importovať { useEffect, useRef } od"reagovať";
exportkonšt Domov = () => {
konšt externalRef = useRef();
 useEffect(() => {
konšt handleClickOutside = (e) => {
ak (outerRef.current && !outerRef.current.contains (e.target)) {
// Skrytie prvku div alebo vykonanie akejkoľvek požadovanej akcie
 }
 };
dokument.addEventListener("klik", handleClickOutside);
vrátiť() => {
dokument.removeEventListener("klik", handleClickOutside);
 };
 }, []);
vrátiť (

šírka: "200px", výška: "200px", pozadie: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Tento kód používa háčik useRef na vytvorenie objektu s názvom vonkajšieRef. Potom odkazuje na tento objekt prostredníctvom vlastnosti ref prvku div.

Môžete použiť useEffect háčik na pridanie poslucháča udalosti na stránku. Tu poslucháč volá handleClickOutside keď používateľ spustí udalosť kliknutia. The useEffect hook tiež vráti funkciu čistenia, ktorá odstráni prijímač udalostí, keď sa komponent Home odpojí. To zaisťuje, že nedochádza k úniku pamäte.

Funkcia handleClickOutside kontroluje, či je cieľom udalosti prvok div. Objekt ref poskytuje informácie o prvku, na ktorý odkazuje v objekte nazývanom aktuálny. Môžete ho skontrolovať a zistiť, či prvok div spustil poslucháča potvrdením, že neobsahuje event.target. Ak nie, môžete div skryť.

Vytvorenie vlastného háku na manipuláciu s kliknutiami mimo komponentu

Vlastný hák by vám umožnil opätovne použiť túto funkciu vo viacerých komponentoch bez toho, aby ste ju museli zakaždým definovať.

Tento hák by mal akceptovať dva argumenty, funkciu spätného volania a objekt ref.

V tomto háku je funkcia spätného volania funkcia, ktorá sa volá, keď kliknete na priestor mimo cieľového prvku. Objekt ref odkazuje na vonkajší komponent.

Ak chcete vytvoriť háčik, pridajte nový súbor s názvom použiteClickOutside do svojho projektu a pridajte nasledujúci kód:

importovať { useEffect } od"reagovať";
exportkonšt useOutsideClick = (spätné volanie, ref) => {
konšt handleClickOutside = (udalosť) => {
ak (ref.current && !ref.current.contains (event.target)) {
 zavolaj späť();
 }
 };
 useEffect(() => {
dokument.addEventListener("klik", handleClickOutside);
vrátiť() => {
dokument.removeEventListener("klik", handleClickOutside);
 };
 });
};

Tento hák funguje rovnakým spôsobom ako predchádzajúci príklad kódu, ktorý zistil vonkajšie kliknutia vo vnútri komponentu Home. Rozdiel je v tom, že je opakovane použiteľný.

Ak ho chcete použiť, importujte ho do domovského komponentu a odovzdajte funkciu spätného volania a objekt ref.

konšt hideDiv = () => {
konzoly.log("Skrytý div");
};
useOutsideClick (closeModal, externalRef);

Tento prístup abstrahuje logiku zisťovania kliknutí mimo prvku a uľahčuje čítanie kódu.

Zlepšite používateľskú skúsenosť zisťovaním kliknutí mimo komponentu

Či už ide o zatvorenie rozbaľovacej ponuky, zrušenie modálu alebo prepnutie viditeľnosti určitých prvkov, detekcia kliknutí mimo komponentu umožňuje intuitívny a bezproblémový používateľský zážitok. V React môžete použiť objekty ref a obslužné rutiny udalostí kliknutia na vytvorenie vlastného háku, ktorý môžete znova použiť vo svojej aplikácii.