Hur man upptäcker klick utanför en reaktionskomponent med hjälp av en anpassad krok

Många användargränssnitt använder komponenter som visas baserat på händelser som ett knappklick. När du arbetar med en sådan komponent vill du ha ett sätt att dölja den igen, vanligtvis som svar på ett klick utanför dess gräns.

Det här mönstret är särskilt användbart för komponenter som modals eller slide-in-menyer.

Hantera klick utanför ett element

Förutsatt att du har följande markering i din applikation och du vill stänga det inre elementet när du klickar på det yttre elementet:

<OuterElement>
<InnerElement/>
OuterElement>

För att hantera klick utanför ett element måste du bifoga en evenemangslyssnare till det yttre elementet. Sedan, när en klickhändelse inträffar, gå till händelseobjektet och undersök dess målegenskap.

Om händelsemålet inte innehåller det inre elementet betyder det att klickhändelsen inte utlöstes inom det inre elementet. I det här fallet bör du ta bort eller dölja det inre elementet från DOM.

Det här är en förklaring på hög nivå av hur du hanterar klick utanför ett element. För att se hur detta skulle fungera i en React-app måste du göra det skapa ett nytt React-projekt med Vite.

Du kan skapa projektet med andra metoder eller helt enkelt använda ett befintligt projekt.

Hantera klick utanför ett element i en React-applikation

I basen av ditt projekt skapar du en ny fil som heter Home.jsx och lägg till följande kod för att skapa en div som ska döljas när du klickar på sektionselementet.

importera { useEffect, useRef } från"reagera";
exporterakonst Hemma = () => {
konst yttreRef = useRef();
 useEffect(() => {
konst handleClickOutside = (e) => {
om (outerRef.current && !outerRef.current.contains (e.target)) {
// Göm div eller utför valfri åtgärd
 }
 };
dokumentera.addEventListener("klick", handleClickOutside);
lämna tillbaka() => {
dokumentera.removeEventListener("klick", handleClickOutside);
 };
 }, []);
lämna tillbaka (

bredd: "200px", höjd: "200px", bakgrund: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Den här koden använder useRef-kroken för att skapa ett objekt med namnet yttreRef. Den refererar sedan till detta objekt via div-elementets ref-egenskap.

Du kan använda useEffect krok för att lägga till en händelseavlyssnare på sidan. Lyssnaren här kallar handleClickOutside funktion när en användare utlöser klickhändelsen. De useEffect hook returnerar också en rensningsfunktion som tar bort händelseavlyssnaren när Home-komponenten avmonteras. Detta säkerställer att det inte finns några minnesläckor.

HandleClickOutside-funktionen kontrollerar om händelsemålet är div-elementet. Ref-objektet tillhandahåller informationen om elementet det refererar till i ett objekt som kallas aktuell. Du kan kontrollera det för att se om div-elementet triggade lyssnaren genom att bekräfta att det inte innehåller event.target. Om det inte gör det kan du dölja div.

Skapa en anpassad krok för hantering av klick utanför en komponent

En anpassad krok skulle tillåta dig att återanvända den här funktionen i flera komponenter utan att behöva definiera den varje gång.

Denna hook ska acceptera två argument, en callback-funktion och ett ref-objekt.

I denna hook är callback-funktionen den funktion som anropas när du klickar på utrymmet utanför målelementet. Referensobjektet refererar till den yttre komponenten.

För att skapa kroken, lägg till en ny fil med namnet användClickOutside till ditt projekt och lägg till följande kod:

importera { useEffect } från"reagera";
exporterakonst useOutsideClick = (återuppringning, ref) => {
konst handleClickOutside = (händelse) => {
om (ref.current && !ref.current.contains (event.target)) {
 ring tillbaka();
 }
 };
 useEffect(() => {
dokumentera.addEventListener("klick", handleClickOutside);
lämna tillbaka() => {
dokumentera.removeEventListener("klick", handleClickOutside);
 };
 });
};

Den här kroken fungerar på samma sätt som det tidigare kodexemplet, som upptäckte externa klick inuti Home-komponenten. Skillnaden är att den är återanvändbar.

För att använda den, importera den i hemkomponenten och skicka in en återuppringningsfunktion och ett ref-objekt.

konst hideDiv = () => {
trösta.logga("Dold div");
};
useOutsideClick (closeModal, outerRef);

Detta tillvägagångssätt abstraherar logiken i att upptäcka klick utanför ett element och gör din kod lättare att läsa.

Förbättra användarupplevelsen genom att upptäcka klick utanför en komponent

Oavsett om det handlar om att stänga en rullgardinsmeny, avvisa en modal eller växla synligheten för vissa element, kan upptäcka klick utanför en komponent en intuitiv och sömlös användarupplevelse. I React kan du använda ref-objekten och klicka på händelsehanterare för att skapa en anpassad hook som du kan återanvända i din applikation.