Lielākā daļa tīmekļa lietotņu vienā vai otrā veidā reaģē uz klikšķu notikumiem, un ir ļoti svarīgi precīzi noteikt, kur notika klikšķis, lai jūsu lietotāja saskarne darbotos labi.
Daudzās lietotāja saskarnēs tiek izmantoti komponenti, kas parādās, pamatojoties uz tādiem notikumiem kā pogas klikšķi. Strādājot ar šādu komponentu, jums būs nepieciešams veids, kā to atkal paslēpt, parasti reaģējot uz klikšķi ārpus tā robežas.
Šis modelis ir īpaši noderīgs komponentiem, piemēram, modāliem vai iebīdāmām izvēlnēm.
Klikšķu apstrāde ārpus elementa
Pieņemot, ka jūsu lietojumprogrammā ir šāds marķējums un, noklikšķinot uz ārējā elementa, vēlaties aizvērt iekšējo elementu:
<Ārējais elements>
<Iekšējais elements/>
Ārējais elements>
Lai apstrādātu klikšķus ārpus elementa, tas ir jādara pievienojiet notikumu klausītāju uz ārējo elementu. Pēc tam, kad notiek klikšķa notikums, piekļūstiet notikuma objektam un pārbaudiet tā mērķa rekvizītu.
Ja notikuma mērķis nesatur iekšējo elementu, tas nozīmē, ka klikšķa notikums netika aktivizēts iekšējā elementā. Šajā gadījumā jums vajadzētu noņemt vai paslēpt iekšējo elementu no DOM.
Šis ir augsta līmeņa skaidrojums par to, kā tiek apstrādāti klikšķi ārpus elementa. Lai redzētu, kā tas darbosies React lietotnē, jums tas būs jādara izveidot jaunu React projektu, izmantojot Vite.
Jūs varat izveidot projektu, izmantojot citas metodes vai vienkārši izmantot esošu projektu.
Klikšķu apstrāde ārpus elementa React lietojumprogrammā
Projekta pamatā izveidojiet jaunu failu ar nosaukumu Sākums.jsx un pievienojiet šo kodu, lai izveidotu div, kas jāpaslēpj, noklikšķinot uz sadaļas elementa.
imports { useEffect, useRef } no"reaģēt";eksportētkonst Mājas = () => {
konst outerRef = useRef();useEffect(() => {
konst handClickOutside = (e) => {
ja (outerRef.current && !outerRef.current.contains (e.target)) {
// Slēpt div vai veikt jebkuru vēlamo darbību
}
};dokumentu.addEventListener("klikšķis", rokturisClickOutside);
atgriezties() => {
dokumentu.removeEventListener("klikšķis", rokturisClickOutside);
};
}, []);
atgriezties (
</section>
);
};
Šis kods izmanto āķi useRef, lai izveidotu objektu ar nosaukumu ārējā Ref. Pēc tam tas atsaucas uz šo objektu, izmantojot div elementa ref rekvizītu.
Jūs varat izmantot useEffect āķis, lai lapai pievienotu notikumu klausītāju. Klausītājs šeit zvana rokturisClickOutside funkcija, kad lietotājs aktivizē klikšķa notikumu. The useEffect hook atgriež arī tīrīšanas funkciju, kas noņem notikumu uztvērēju, kad tiek atvienots Home komponents. Tas nodrošina, ka nav atmiņas noplūdes.
Funkcija handleClickOutside pārbauda, vai notikuma mērķis ir div elements. Atsauces objekts sniedz informāciju par elementu, uz kuru tas atsaucas objektā, ko sauc par pašreizējo. Varat to pārbaudīt, lai redzētu, vai div elements ir aktivizējis klausītāju, apstiprinot, ka tajā nav ietverts event.target. Ja tā nav, varat paslēpt div.
Pielāgota āķa izveide klikšķu apstrādei ārpus komponenta
Pielāgots āķis ļautu atkārtoti izmantot šo funkcionalitāti vairākos komponentos, to nedefinējot katru reizi.
Šim āķim ir jāpieņem divi argumenti, atzvanīšanas funkcija un atsauces objekts.
Šajā āķī atzvanīšanas funkcija ir funkcija, kas tiek izsaukta, kad noklikšķināt uz vietas ārpus mērķa elementa. Atsauces objekts atsaucas uz ārējo komponentu.
Lai izveidotu āķi, pievienojiet jaunu failu ar nosaukumu useClickOutside savam projektam un pievienojiet šādu kodu:
imports { useEffect } no"reaģēt";
eksportētkonst useOutsideClick = (atzvanīšana, ref) => {
konst handClickOutside = (notikumu) => {
ja (ref.current && !ref.current.contains (event.target)) {
atzvani();
}
};useEffect(() => {
dokumentu.addEventListener("klikšķis", rokturisClickOutside);
atgriezties() => {
dokumentu.removeEventListener("klikšķis", rokturisClickOutside);
};
});
};
Šis āķis darbojas tāpat kā iepriekšējais koda piemērs, kas atklāja ārējos klikšķus sākuma komponentā. Atšķirība ir tāda, ka tas ir atkārtoti lietojams.
Lai to izmantotu, importējiet to mājas komponentā un nosūtiet atzvanīšanas funkciju un atsauces objektu.
konst hideDiv = () => {
konsole.log("Slēptais div");
};
useOutsideClick (closeModal, outerRef);
Šī pieeja abstrahē klikšķu noteikšanas loģiku ārpus elementa un padara kodu vieglāk lasāmu.
Uzlabojiet lietotāja pieredzi, nosakot klikšķus ārpus komponenta
Neatkarīgi no tā, vai tā ir nolaižamās izvēlnes aizvēršana, modāla noraidīšana vai noteiktu elementu redzamības pārslēgšana, klikšķu noteikšana ārpus komponenta nodrošina intuitīvu un netraucētu lietotāja pieredzi. Programmā React varat izmantot ref objektus un noklikšķināt uz notikumu apdarinātājiem, lai izveidotu pielāgotu āķi, ko varat atkārtoti izmantot savā lietojumprogrammā.
