Kako zaznati klike zunaj komponente React z uporabo kljuke po meri

Številni uporabniški vmesniki uporabljajo komponente, ki se prikažejo na podlagi dogodkov, kot je klik gumba. Ko delate s takšno komponento, boste želeli način, kako jo znova skriti, običajno kot odgovor na klik zunaj njene meje.

Ta vzorec je še posebej uporaben za komponente, kot so modali ali drsni meniji.

Ravnanje s kliki zunaj elementa

Ob predpostavki, da imate v aplikaciji naslednje oznake in želite zapreti notranji element, ko kliknete zunanji element:

<ZunanjiElement>
<InnerElement/>
ZunanjiElement>

Če želite obravnavati klike zunaj elementa, morate priložite poslušalca dogodka na zunanji element. Nato, ko pride do dogodka klika, dostopajte do objekta dogodka in preglejte njegovo ciljno lastnost.

Če cilj dogodka ne vsebuje notranjega elementa, to pomeni, da dogodek klika ni bil sprožen znotraj notranjega elementa. V tem primeru bi morali odstraniti ali skriti notranji element iz DOM-a.

To je razlaga na visoki ravni, kako obravnavate klike zunaj elementa. Če želite videti, kako bi to delovalo v aplikaciji React, boste morali ustvarite nov projekt React z uporabo Vite.

Projekt lahko ustvarite z drugimi metodami ali preprosto uporabite obstoječi projekt.

Ravnanje s kliki zunaj elementa v aplikaciji React

Na podlagi vašega projekta ustvarite novo datoteko z imenom Domov.jsx in dodajte naslednjo kodo, da ustvarite div, ki naj se skrije, ko kliknete element razdelka.

uvoz {useEffect, useRef} od"reagirati";
izvozkonst Domov = () => {
konst zunanjiRef = useRef();
 useEffect(() => {
konst handleClickOutside = (e) => {
če (outerRef.current && !outerRef.current.contains (e.target)) {
// Skrij div ali izvedi katero koli želeno dejanje
 }
 };
dokument.addEventListener("klik", handleClickOutside);
vrnitev() => {
dokument.removeEventListener("klik", handleClickOutside);
 };
 }, []);
vrnitev (

premer: "200px", višina: "200px", ozadje: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Ta koda uporablja kljuko useRef za ustvarjanje predmeta z imenom zunanjiRef. Nato se sklicuje na ta objekt prek lastnosti ref elementa div.

Lahko uporabite useEffect kavelj za dodajanje poslušalca dogodkov na stran. Poslušalec tukaj kliče handleClickOutside funkcijo, ko uporabnik sproži dogodek klika. The useEffect hook vrne tudi funkcijo čiščenja, ki odstrani poslušalca dogodkov, ko se komponenta Home odklopi. To zagotavlja, da ne pride do uhajanja pomnilnika.

Funkcija handleClickOutside preveri, ali je cilj dogodka element div. Objekt ref nudi informacije o elementu, na katerega se sklicuje v objektu, imenovanem current. Lahko preverite, ali je element div sprožil poslušalca, tako da potrdite, da ne vsebuje event.target. Če se ne, lahko div skrijete.

Ustvarjanje kljuke po meri za obdelavo klikov zunaj komponente

Kavelj po meri bi vam omogočil ponovno uporabo te funkcije v več komponentah, ne da bi jo morali vsakič definirati.

Ta kavelj mora sprejeti dva argumenta, funkcijo povratnega klica in objekt ref.

V tem kavlju je funkcija povratnega klica funkcija, ki se kliče, ko kliknete presledek zunaj ciljnega elementa. Objekt ref se sklicuje na zunanjo komponento.

Če želite ustvariti kavelj, dodajte novo datoteko z imenom useClickOutside v svoj projekt in dodajte naslednjo kodo:

uvoz { useEffect } od"reagirati";
izvozkonst useOutsideClick = (povratni klic, ref) => {
konst handleClickOutside = (dogodek) => {
če (ref.current && !ref.current.contains (event.target)) {
 poklicati nazaj();
 }
 };
 useEffect(() => {
dokument.addEventListener("klik", handleClickOutside);
vrnitev() => {
dokument.removeEventListener("klik", handleClickOutside);
 };
 });
};

Ta kavelj deluje na enak način kot prejšnji primer kode, ki je zaznal zunanje klike znotraj komponente Domov. Razlika je v tem, da je za večkratno uporabo.

Če ga želite uporabiti, ga uvozite v domačo komponento ter posredujte funkcijo povratnega klica in objekt ref.

konst hideDiv = () => {
konzola.log("Skriti div");
};
useOutsideClick (closeModal, outerRef);

Ta pristop abstrahira logiko zaznavanja klikov zunaj elementa in olajša branje kode.

Izboljšajte uporabniško izkušnjo z zaznavanjem klikov zunaj komponente

Ne glede na to, ali gre za zapiranje spustnega menija, opustitev modala ali preklop vidnosti določenih elementov, zaznavanje klikov zunaj komponente omogoča intuitivno in brezhibno uporabniško izkušnjo. V Reactu lahko uporabite ref objekte in upravljalnike dogodkov klika, da ustvarite kavelj po meri, ki ga lahko ponovno uporabite v svoji aplikaciji.