Sådan registreres klik uden for en reaktionskomponent ved hjælp af en tilpasset krog

Mange brugergrænseflader bruger komponenter, der vises baseret på hændelser, såsom et klik på en knap. Når du arbejder med en sådan komponent, vil du gerne have en måde at skjule den på igen, normalt som svar på et klik uden for dens grænse.

Dette mønster er især nyttigt for komponenter såsom modals eller slide-in menuer.

Håndtering af klik uden for et element

Forudsat at du har følgende markering i din applikation, og du vil lukke det indre element, når du klikker på det ydre element:

<Ydre Element>
<InderElement/>
Ydre Element>

For at håndtere klik uden for et element, skal du vedhæft en begivenhedslytter til det ydre element. Derefter, når en klikhændelse opstår, skal du åbne hændelsesobjektet og undersøge dets målegenskab.

Hvis begivenhedsmålet ikke indeholder det indre element, betyder det, at klikhændelsen ikke blev udløst i det indre element. I dette tilfælde skal du fjerne eller skjule det indre element fra DOM.

Dette er en forklaring på højt niveau af, hvordan du håndterer klik uden for et element. For at se, hvordan dette ville fungere i en React-app, skal du oprette et nyt React-projekt ved hjælp af Vite.

Du kan oprette projektet ved hjælp af andre metoder eller blot bruge et eksisterende projekt.

Håndtering af klik uden for et element i en React-applikation

I bunden af ​​dit projekt skal du oprette en ny fil kaldet Home.jsx og tilføj følgende kode for at oprette en div, der skal skjule sig, når du klikker på sektionselementet.

importere { useEffect, useRef } fra"reagere";
eksportkonst Hjem = () => {
konst outerRef = useRef();
 useEffect(() => {
konst handleClickOutside = (e) => {
hvis (outerRef.current && !outerRef.current.contains (e.target)) {
// Skjul div eller udfør en ønsket handling
 }
 };
dokument.addEventListener("klik", handleClickOutside);
Vend tilbage() => {
dokument.removeEventListener("klik", handleClickOutside);
 };
 }, []);
Vend tilbage (

bredde: "200px", højde: "200px", baggrund: "#000" }} ref={ydreRef}></div>
 </section>
 );
};

Denne kode bruger useRef hook til at oprette et objekt navngivet ydreRef. Det refererer derefter til dette objekt via div-elementets ref-egenskab.

Du kan bruge useEffect krog for at tilføje en begivenhedslytter til siden. Lytteren her kalder handleClickOutside funktion, når en bruger udløser klikhændelsen. Det useEffect hook returnerer også en oprydningsfunktion, der fjerner hændelseslytteren, når Home-komponenten afmonteres. Dette sikrer, at der ikke er hukommelseslækager.

HandleClickOutside-funktionen kontrollerer, om begivenhedsmålet er div-elementet. Ref-objektet giver informationen om det element, det refererer til i et objekt kaldet strøm. Du kan tjekke det for at se, om div-elementet udløste lytteren ved at bekræfte, at det ikke indeholder event.target. Hvis det ikke gør det, kan du skjule div.

Oprettelse af en tilpasset krog til håndtering af klik uden for en komponent

En brugerdefineret krog vil give dig mulighed for at genbruge denne funktionalitet i flere komponenter uden at skulle definere det hver gang.

Denne hook skal acceptere to argumenter, en tilbagekaldsfunktion og et ref-objekt.

I denne krog er tilbagekaldsfunktionen den funktion, der kaldes, når du klikker på pladsen uden for målelementet. Ref-objektet refererer til den ydre komponent.

For at oprette krogen skal du tilføje en ny fil med navnet brug KlikUdenfor til dit projekt og tilføj følgende kode:

importere { useEffect } fra"reagere";
eksportkonst useOutsideClick = (tilbagekald, ref) => {
konst handleClickOutside = (begivenhed) => {
hvis (ref.current && !ref.current.contains (event.target)) {
 ring tilbage();
 }
 };
 useEffect(() => {
dokument.addEventListener("klik", handleClickOutside);
Vend tilbage() => {
dokument.removeEventListener("klik", handleClickOutside);
 };
 });
};

Denne krog fungerer på samme måde som det forrige kodeeksempel, som registrerede udvendige klik inde i Home-komponenten. Forskellen er, at den kan genbruges.

For at bruge det skal du importere det i hjemmekomponenten og sende en tilbagekaldsfunktion og et ref-objekt ind.

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

Denne tilgang abstraherer logikken i at detektere klik uden for et element og gør din kode lettere at læse.

Forbedre brugeroplevelsen ved at registrere klik uden for en komponent

Uanset om det er at lukke en rullemenu, afvise en modal eller skifte synligheden af ​​visse elementer, giver registrering af klik uden for en komponent en intuitiv og problemfri brugeroplevelse. I React kan du bruge ref-objekterne og klikke på hændelseshandlere til at oprette en tilpasset hook, som du kan genbruge på tværs af din applikation.