Većina web-aplikacija reagira na klikove na ovaj ili onaj način, a otkrivanje mjesta gdje se klik dogodio ključno je za dobro funkcioniranje vašeg korisničkog sučelja.
Mnoga korisnička sučelja koriste komponente koje se pojavljuju na temelju događaja kao što je klik na gumb. Kada radite s takvom komponentom, poželjet ćete način da je ponovno sakrijete, obično kao odgovor na klik izvan njezine granice.
Ovaj je obrazac posebno koristan za komponente kao što su modali ili klizeći izbornici.
Rukovanje klikovima izvan elementa
Pod pretpostavkom da imate sljedeće oznake u svojoj aplikaciji i želite zatvoriti unutarnji element kada kliknete na vanjski element:
<VanjskiElement>
<UnutarnjiElement/>
VanjskiElement>
Za rukovanje klikovima izvan elementa, trebate priložite slušatelja događaja na vanjski element. Zatim, kada se dogodi događaj klika, pristupite objektu događaja i ispitajte njegovo ciljno svojstvo.
Ako cilj događaja ne sadrži unutarnji element, to znači da događaj klika nije pokrenut unutar unutarnjeg elementa. U tom slučaju trebali biste ukloniti ili sakriti unutarnji element iz DOM-a.
Ovo je objašnjenje na visokoj razini kako upravljate klikovima izvan elementa. Da biste vidjeli kako bi to funkcioniralo u aplikaciji React, morat ćete izradite novi React projekt koristeći Vite.
Projekt možete izraditi drugim metodama ili jednostavno upotrijebiti postojeći projekt.
Rukovanje klikovima izvan elementa u React aplikaciji
U osnovi vašeg projekta stvorite novu datoteku pod nazivom Početna.jsx i dodajte sljedeći kod za stvaranje diva koji bi se trebao sakriti kada kliknete element odjeljka.
uvoz {useEffect, useRef} iz"reagirati";izvozkonst Dom = () => {
konst vanjskiRef = useRef();useEffect(() => {
konst handleClickOutside = (e) => {
ako (outerRef.current && !outerRef.current.contains (e.target)) {
// Sakrij div ili izvrši bilo koju željenu radnju
}
};dokument.addEventListener("klik", handleClickOutside);
povratak() => {
dokument.removeEventListener("klik", handleClickOutside);
};
}, []);
povratak (
</section>
);
};
Ovaj kod koristi kuku useRef za stvaranje objekta pod nazivom vanjskiRef. Zatim referencira ovaj objekt putem svojstva ref elementa div.
Možete koristiti useEffect kuka za dodavanje slušatelja događaja na stranicu. Slušatelj ovdje zove handleClickOutside funkcija kada korisnik pokrene događaj klika. The useEffect hook također vraća funkciju čišćenja koja uklanja slušatelja događaja kada se Home komponenta demontira. Time se osigurava da nema curenja memorije.
Funkcija handleClickOutside provjerava je li cilj događaja div element. Objekt ref pruža informacije o elementu na koji se poziva u objektu koji se zove current. Možete provjeriti je li element div pokrenuo slušatelja tako da potvrdite da ne sadrži event.target. Ako ne, možete sakriti div.
Stvaranje prilagođene kuke za rukovanje klikovima izvan komponente
Prilagođena kuka bi vam omogućila ponovnu upotrebu ove funkcije u više komponenti bez potrebe da je svaki put definirate.
Ova kuka bi trebala prihvatiti dva argumenta, funkciju povratnog poziva i ref objekt.
U ovoj kuki, funkcija povratnog poziva je funkcija koja se poziva kada kliknete razmak izvan ciljnog elementa. Objekt ref upućuje na vanjsku komponentu.
Da biste stvorili kuku, dodajte novu datoteku pod nazivom useClickOutside svom projektu i dodajte sljedeći kod:
uvoz { useEffect } iz"reagirati";
izvozkonst useOutsideClick = (povratni poziv, ref) => {
konst handleClickOutside = (događaj) => {
ako (ref.current && !ref.current.contains (event.target)) {
uzvratiti poziv();
}
};useEffect(() => {
dokument.addEventListener("klik", handleClickOutside);
povratak() => {
dokument.removeEventListener("klik", handleClickOutside);
};
});
};
Ova kuka radi na isti način kao i prethodni primjer koda, koji je detektirao vanjske klikove unutar komponente Home. Razlika je u tome što se može ponovno koristiti.
Da biste ga koristili, uvezite ga u početnu komponentu i proslijedite funkciju povratnog poziva i objekt ref.
konst hideDiv = () => {
konzola.log("Skriveni div");
};
useOutsideClick (closeModal, outerRef);
Ovaj pristup apstrahira logiku otkrivanja klikova izvan elementa i čini vaš kod lakšim za čitanje.
Poboljšajte korisničko iskustvo otkrivanjem klikova izvan komponente
Bilo da se radi o zatvaranju padajućeg izbornika, odbacivanju modala ili uključivanju/isključivanju vidljivosti određenih elemenata, otkrivanje klikova izvan komponente omogućuje intuitivno i besprijekorno korisničko iskustvo. U Reactu možete koristiti ref objekte i rukovatelje događajima klikanja za stvaranje prilagođene kuke koju možete ponovno koristiti u svojoj aplikaciji.
