Jak detekovat kliknutí mimo součást React pomocí vlastního háku

Mnoho uživatelských rozhraní používá komponenty, které se objevují na základě událostí, jako je kliknutí na tlačítko. Když s takovou komponentou pracujete, budete chtít způsob, jak ji znovu skrýt, obvykle v reakci na kliknutí mimo její hranice.

Tento vzor je zvláště užitečný pro komponenty, jako jsou modály nebo zasouvací nabídky.

Zpracování kliknutí mimo prvek

Za předpokladu, že máte ve své aplikaci následující označení a chcete zavřít vnitřní prvek, když kliknete na vnější prvek:

<Vnější prvek>
<InnerElement/>
Vnější prvek>

Chcete-li zpracovat kliknutí mimo prvek, musíte to udělat připojit posluchač události k vnějšímu prvku. Poté, když dojde k události kliknutí, otevřete objekt události a prozkoumejte jeho cílovou vlastnost.

Pokud cíl události neobsahuje vnitřní prvek, znamená to, že událost kliknutí nebyla spuštěna v rámci vnitřního prvku. V tomto případě byste měli odstranit nebo skrýt vnitřní prvek z DOM.

Toto je podrobné vysvětlení toho, jak zpracováváte kliknutí mimo prvek. Chcete-li vidět, jak by to fungovalo v aplikaci React, musíte to udělat vytvořte nový projekt React pomocí Vite.

Projekt můžete vytvořit pomocí jiných metod nebo jednoduše použít existující projekt.

Zpracování kliknutí mimo prvek v aplikaci React

V základu projektu vytvořte nový soubor s názvem Home.jsx a přidejte následující kód, abyste vytvořili div, který by se měl skrýt, když kliknete na prvek sekce.

import { useEffect, useRef } z"reagovat";
vývozníkonst Domů = () => {
konst externalRef = useRef();
 useEffect(() => {
konst handleClickOutside = (E) => {
-li (outerRef.current && !outerRef.current.contains (e.target)) {
// Skryjte div nebo proveďte jakoukoli požadovanou akci
 }
 };
dokument.addEventListener("kliknout", handleClickOutside);
vrátit se() => {
dokument.removeEventListener("kliknout", handleClickOutside);
 };
 }, []);
vrátit se (

šířka: "200px", výška: "200px", Pozadí: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Tento kód používá háček useRef k vytvoření objektu s názvem vnějšíRef. Poté odkazuje na tento objekt prostřednictvím vlastnosti ref prvku div.

Můžete použít useEffect háček pro přidání posluchače události na stránku. Zde posluchač volá handleClickOutside funkce, když uživatel spustí událost kliknutí. The useEffect hook také vrátí funkci čištění, která odebere posluchač událostí, když se komponenta Home odpojí. Tím je zajištěno, že nedochází k únikům paměti.

Funkce handleClickOutside kontroluje, zda je cílem události prvek div. Objekt ref poskytuje informace o prvku, na který odkazuje v objektu zvaném current. Můžete zkontrolovat, zda prvek div spustil posluchače, potvrzením, že neobsahuje event.target. Pokud ne, můžete div skrýt.

Vytvoření vlastního háku pro manipulaci s klikáním mimo součást

Vlastní hák by vám umožnil znovu použít tuto funkci ve více komponentách, aniž byste ji museli pokaždé definovat.

Tento háček by měl přijímat dva argumenty, funkci zpětného volání a objekt ref.

V tomto háku je funkce zpětného volání funkce, která se volá, když kliknete na prostor mimo cílový prvek. Objekt ref odkazuje na vnější komponentu.

Chcete-li vytvořit háček, přidejte nový soubor s názvem použijteClickOutside do svého projektu a přidejte následující kód:

import { useEffect } z"reagovat";
vývozníkonst useOutsideClick = (zpětné volání, čj) => {
konst handleClickOutside = (událost) => {
-li (ref.current && !ref.current.contains (event.target)) {
 zpětné volání ();
 }
 };
 useEffect(() => {
dokument.addEventListener("kliknout", handleClickOutside);
vrátit se() => {
dokument.removeEventListener("kliknout", handleClickOutside);
 };
 });
};

Tento hák funguje stejným způsobem jako předchozí příklad kódu, který detekoval vnější kliknutí uvnitř komponenty Home. Rozdíl je v tom, že je znovu použitelný.

Chcete-li ji použít, importujte ji do domovské komponenty a předejte funkci zpětného volání a objekt ref.

konst hideDiv = () => {
řídicí panel.log("Skrytý div");
};
useOutsideClick (closeModal, externalRef);

Tento přístup abstrahuje logiku detekce kliknutí mimo prvek a usnadňuje čtení kódu.

Zlepšete uživatelský dojem detekcí kliknutí mimo součást

Ať už se jedná o zavření rozevírací nabídky, zrušení modu nebo přepínání viditelnosti určitých prvků, detekce kliknutí mimo součást umožňuje intuitivní a bezproblémové uživatelské prostředí. V Reactu můžete použít objekty ref a obslužné rutiny událostí kliknutí k vytvoření vlastního háku, který můžete znovu použít ve své aplikaci.