Enamik veebirakendusi reageerib klõpsamissündmustele ühel või teisel viisil ja klõpsu täpse asukoha tuvastamine on teie kasutajaliidese hästi toimimiseks ülioluline.
Paljud kasutajaliidesed kasutavad komponente, mis ilmuvad sündmuste, näiteks nupuklõpsude põhjal. Kui töötate sellise komponendiga, soovite selle uuesti peita, tavaliselt vastuseks klõpsule väljaspool selle piire.
See muster on eriti kasulik selliste komponentide jaoks nagu modaalid või sisselülitatavad menüüd.
Elementi väliste klikkide käsitlemine
Eeldades, et teie rakenduses on järgmine märgistus ja soovite sisemise elemendi sulgeda, kui klõpsate välimisel elemendil:
<Väline element>
<Siseelement/>
Väline element>
Elementi väliste klikkide käsitlemiseks peate seda tegema lisage sündmusekuulaja välisele elemendile. Seejärel, kui klõpsamissündmus toimub, avage sündmuseobjektile juurdepääs ja uurige selle sihtomadust.
Kui sündmuse sihtmärk ei sisalda sisemist elementi, tähendab see, et klikisündmust ei käivitatud sisemises elemendis. Sel juhul peaksite sisemise elemendi DOM-ist eemaldama või peitma.
See on kõrgetasemeline selgitus selle kohta, kuidas käsitlete klikke väljaspool elementi. Et näha, kuidas see Reacti rakenduses toimiks, peate seda tegema luua Vite abil uus Reacti projekt.
Saate luua projekti teiste meetoditega või lihtsalt kasutada olemasolevat projekti.
Reacti rakenduses elemendi väliste klikkide käsitlemine
Looge oma projekti põhjas uus fail nimega Home.jsx ja lisage järgmine kood, et luua div, mis peaks peituma, kui klõpsate jaotise elemendil.
importida { useEffect, useRef } alates"reageerida";eksportidakonst Kodu = () => {
konst outerRef = useRef();useEffect(() => {
konst HandClickOutside = (e) => {
kui (outerRef.current && !outerRef.current.contains (e.target)) {
// Peidake div või tehke soovitud toiming
}
};dokument.addEventListener("klõpsake", käepideClickOutside);
tagasi() => {
dokument.removeEventListener("klõpsake", käepideClickOutside);
};
}, []);
tagasi (
</section>
);
};
See kood kasutab nimelise objekti loomiseks konksu useRef outerRef. Seejärel viitab see sellele objektile div elemendi ref atribuudi kaudu.
Võite kasutada useEffect konks sündmusekuulaja lisamiseks lehele. Siinne kuulaja helistab käepideClickOutside funktsioon, kui kasutaja käivitab klikisündmuse. The useEffect hook tagastab ka puhastusfunktsiooni, mis eemaldab kodukomponendi lahtiühendamisel sündmustekuulaja. See tagab, et mälulekkeid ei esine.
Funktsioon handleClickOutside kontrollib, kas sündmuse sihtmärk on element div. Ref-objekt pakub teavet elemendi kohta, millele see viitab objektis, mida nimetatakse praeguseks. Saate kontrollida, kas element div käivitas kuulaja, kinnitades, et see ei sisalda elementi event.target. Kui see nii ei ole, saate jaotise peita.
Kohandatud konksu loomine komponendiväliste klikkide käsitlemiseks
Kohandatud konks võimaldab teil seda funktsiooni mitmes komponendis uuesti kasutada, ilma et peaksite seda iga kord määratlema.
See konks peaks aktsepteerima kahte argumenti, tagasihelistamise funktsiooni ja viiteobjekti.
Selles konksus on tagasihelistamise funktsioon funktsioon, mis kutsutakse välja, kui klõpsate sihtelemendist väljaspool asuvat ruumi. Ref-objekt viitab välisele komponendile.
Konksu loomiseks lisage uus fail nimega useClickOutside oma projektile ja lisage järgmine kood:
importida { useEffect } alates"reageerida";
eksportidakonst useOutsideClick = (tagasihelistamine, ref) => {
konst HandClickOutside = (sündmus) => {
kui (ref.current && !ref.current.contains (event.target)) {
helista tagasi();
}
};useEffect(() => {
dokument.addEventListener("klõpsake", käepideClickOutside);
tagasi() => {
dokument.removeEventListener("klõpsake", käepideClickOutside);
};
});
};
See konks töötab samamoodi nagu eelmine koodinäide, mis tuvastas kodukomponendis välised klõpsud. Erinevus seisneb selles, et see on korduvkasutatav.
Selle kasutamiseks importige see kodukomponendisse ning sisestage tagasihelistamise funktsioon ja viiteobjekt.
konst hideDiv = () => {
konsool.log("Varjatud div");
};
useOutsideClick (closeModal, outerRef);
See lähenemine abstraheerib elemendi väliste klikkide tuvastamise loogika ja muudab koodi hõlpsamini loetavaks.
Parandage kasutajakogemust, tuvastades komponendiväliseid klikke
Ükskõik, kas see on rippmenüü sulgemine, modaalist loobumine või teatud elementide nähtavuse ümberlülitamine, võimaldab komponendiväliste klikkide tuvastamine intuitiivset ja sujuvat kasutuskogemust. Rakenduses React saate kasutada viiteobjekte ja klõpsata sündmuste käitlejaid, et luua kohandatud konks, mida saate oma rakenduses uuesti kasutada.
