Dauguma žiniatinklio programų vienaip ar kitaip reaguoja į paspaudimų įvykius, o norint, kad vartotojo sąsaja veiktų gerai, labai svarbu tiksliai nustatyti, kur įvyko paspaudimas.
Daugelyje vartotojo sąsajų naudojami komponentai, kurie atsiranda atsižvelgiant į įvykius, pvz., mygtuko paspaudimą. Kai dirbate su tokiu komponentu, norėsite vėl jį paslėpti, paprastai reaguodami į paspaudimą už jo ribos.
Šis modelis ypač naudingas komponentams, tokiems kaip modalai arba įstumiami meniu.
Paspaudimų už elemento ribų tvarkymas
Darant prielaidą, kad jūsų programoje yra toks žymėjimas ir norite uždaryti vidinį elementą, kai spustelėsite išorinį elementą:
<Išorinis elementas>
<Vidinis elementas/>
Išorinis elementas>
Norėdami apdoroti paspaudimus už elemento ribų, turite prijunkite įvykių klausytoją prie išorinio elemento. Tada, kai įvyksta paspaudimo įvykis, pasiekite įvykio objektą ir patikrinkite jo tikslinę ypatybę.
Jei įvykio taikinyje nėra vidinio elemento, tai reiškia, kad paspaudimo įvykis nebuvo suaktyvintas vidiniame elemente. Tokiu atveju turėtumėte pašalinti arba paslėpti vidinį elementą iš DOM.
Tai aukšto lygio paaiškinimas, kaip tvarkote paspaudimus už elemento ribų. Jei norite pamatyti, kaip tai veiktų „React“ programoje, turėsite sukurkite naują React projektą naudodami Vite.
Galite sukurti projektą naudodami kitus metodus arba tiesiog naudoti esamą projektą.
Paspaudimų už elemento ribų tvarkymas „React“ programoje
Savo projekto bazėje sukurkite naują failą pavadinimu Home.jsx ir pridėkite šį kodą, kad sukurtumėte div, kuris turėtų pasislėpti spustelėjus sekcijos elementą.
importuoti { useEffect, useRef } iš"reaguoti";eksportuotikonst Namai = () => {
konst outerRef = useRef();useEffect (() => {
konst handClickOutside = (e) => {
jeigu (outerRef.current && !outerRef.current.contains (e.target)) {
// Paslėpkite div arba atlikite bet kurį norimą veiksmą
}
};dokumentas.addEventListener("spausti", rankenaClickOutside);
grąžinti() => {
dokumentas.removeEventListener("spausti", rankenaClickOutside);
};
}, []);
grąžinti (
</section>
);
};
Šis kodas naudoja kabliuką useRef, kad sukurtų objektą pavadinimu išorinė nuoroda. Tada jis nurodo šį objektą per div elemento ref ypatybę.
Galite naudoti naudojimoEfektas kabliukas, kad pridėtumėte įvykių klausytoją prie puslapio. Klausytojas čia skambina rankenaClickOutside funkcija, kai naudotojas suaktyvina paspaudimo įvykį. The naudojimoEfektas hook taip pat grąžina valymo funkciją, kuri pašalina įvykių klausytoją, kai atjungiamas Home komponentas. Tai užtikrina, kad nėra atminties nutekėjimo.
Funkcija handleClickOutside patikrina, ar įvykio tikslas yra div elementas. Ref objektas pateikia informaciją apie elementą, kurį jis nurodo objekte, vadinamame srovės. Galite patikrinti, ar div elementas suaktyvino klausytoją, patvirtindami, kad jame nėra event.target. Jei ne, galite paslėpti div.
Pasirinktinio kabliuko sukūrimas paspaudimams už komponento ribų valdyti
Pasirinktinis kabliukas leistų pakartotinai naudoti šią funkciją keliuose komponentuose, nereikalaujant jos kiekvieną kartą apibrėžti.
Šis kabliukas turėtų priimti du argumentus: atgalinio skambinimo funkciją ir ref objektą.
Šiame kabliuke atgalinio skambinimo funkcija yra funkcija, kuri iškviečiama spustelėjus tarpą už tikslinio elemento. Ref objektas nurodo išorinį komponentą.
Norėdami sukurti kabliuką, pridėkite naują failą pavadinimu useClickOutside prie projekto ir pridėkite šį kodą:
importuoti { useEffect } iš"reaguoti";
eksportuotikonst useOutsideClick = (perskambinimas, ref) => {
konst handClickOutside = (įvykis) => {
jeigu (ref.current && !ref.current.contains (event.target)) {
perskambink();
}
};useEffect (() => {
dokumentas.addEventListener("spausti", rankenaClickOutside);
grąžinti() => {
dokumentas.removeEventListener("spausti", rankenaClickOutside);
};
});
};
Šis kabliukas veikia taip pat, kaip ir ankstesnis kodo pavyzdys, kuris aptiko išorinius paspaudimus pagrindinio komponento viduje. Skirtumas tas, kad jis yra daugkartinis.
Norėdami jį naudoti, importuokite jį į pagrindinį komponentą ir pateikite atgalinio skambinimo funkciją bei nuorodos objektą.
konst hideDiv = () => {
konsolė.log("Paslėptas div");
};
useOutsideClick (closeModal, outerRef);
Šis metodas abstrahuoja paspaudimų aptikimo už elemento ribų logiką ir palengvina kodo skaitymą.
Pagerinkite naudotojo patirtį aptikdami paspaudimus už komponento ribų
Nesvarbu, ar tai būtų išskleidžiamojo meniu uždarymas, modalo atsisakymas ar tam tikrų elementų matomumo perjungimas, spustelėjimų už komponento ribų aptikimas leidžia naudotis intuityvia ir sklandžia naudotojo patirtimi. React galite naudoti ref objektus ir spustelėti įvykių tvarkykles, kad sukurtumėte tinkintą kabliuką, kurį galėsite pakartotinai naudoti visoje programoje.