Cum să detectați clicurile în afara unei componente React folosind un cârlig personalizat

Multe interfețe de utilizator folosesc componente care apar pe baza unor evenimente precum un clic pe buton. Când lucrați cu o astfel de componentă, veți dori o modalitate de a o ascunde din nou, de obicei ca răspuns la un clic în afara limitei sale.

Acest model este util în special pentru componente precum modal sau meniuri slide-in.

Gestionarea clicurilor în afara unui element

Presupunând că aveți următorul marcaj în aplicația dvs. și doriți să închideți elementul interior când faceți clic pe elementul exterior:

<OuterElement>
<InnerElement/>
OuterElement>

Pentru a gestiona clicurile din afara unui element, trebuie atașați un ascultător de evenimente la elementul exterior. Apoi, când are loc un eveniment de clic, accesați obiectul eveniment și examinați proprietatea țintă a acestuia.

Dacă ținta evenimentului nu conține elementul interior, înseamnă că evenimentul clic nu a fost declanșat în cadrul elementului interior. În acest caz, ar trebui să eliminați sau să ascundeți elementul interior din DOM.

Aceasta este o explicație de nivel înalt a modului în care gestionați clicurile din afara unui element. Pentru a vedea cum ar funcționa acest lucru într-o aplicație React, va trebui creați un nou proiect React folosind Vite.

Puteți crea proiectul folosind alte metode sau pur și simplu utilizați un proiect existent.

Gestionarea clicurilor din afara unui element într-o aplicație React

La baza proiectului, creați un fișier nou numit Acasă.jsx și adăugați următorul cod pentru a crea un div care ar trebui să se ascundă când faceți clic pe elementul secțiune.

import { useEffect, useRef } din"reacţiona";
exportconst Acasă = () => {
const outerRef = useRef();
 useEffect(() => {
const handleClickOutside = (e) => {
dacă (outerRef.current && !outerRef.current.contains (e.target)) {
// Ascundeți div-ul sau efectuați orice acțiune dorită
 }
 };
document.addEventListener("clic", handleClickOutside);
întoarcere() => {
document.removeEventListener("clic", handleClickOutside);
 };
 }, []);
întoarcere (

lăţime: "200px", înălţime: "200px", fundal: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Acest cod folosește cârligul useRef pentru a crea un obiect numit exteriorRef. Apoi face referire la acest obiect prin proprietatea ref a elementului div.

Puteți folosi useEffect cârlig pentru a adăuga un ascultător de evenimente pe pagină. Ascultătorul de aici numește handleClickOutside funcția atunci când un utilizator declanșează evenimentul clic. The useEffect hook returnează, de asemenea, o funcție de curățare care elimină ascultătorul de evenimente atunci când componenta Home se demontează. Acest lucru asigură că nu există scurgeri de memorie.

Funcția handleClickOutside verifică dacă ținta evenimentului este elementul div. Obiectul ref oferă informații despre elementul la care face referire într-un obiect numit curent. Îl puteți verifica pentru a vedea dacă elementul div a declanșat ascultătorul confirmând că nu conține event.target. Dacă nu, puteți ascunde div.

Crearea unui cârlig personalizat pentru gestionarea clicurilor în afara unei componente

Un cârlig personalizat vă va permite să reutilizați această funcționalitate în mai multe componente fără a fi nevoie să o definiți de fiecare dată.

Acest cârlig ar trebui să accepte două argumente, o funcție de apel invers și un obiect ref.

În acest cârlig, funcția de apel invers este funcția care este apelată atunci când faceți clic pe spațiul din afara elementului țintă. Obiectul ref face referire la componenta exterioară.

Pentru a crea cârligul, adăugați un fișier nou numit foloseșteClickOutside la proiectul dvs. și adăugați următorul cod:

import { useEffect } din"reacţiona";
exportconst useOutsideClick = (apel invers, ref) => {
const handleClickOutside = (eveniment) => {
dacă (ref.current && !ref.current.contains (event.target)) {
 sună din nou();
 }
 };
 useEffect(() => {
document.addEventListener("clic", handleClickOutside);
întoarcere() => {
document.removeEventListener("clic", handleClickOutside);
 };
 });
};

Acest cârlig funcționează în același mod ca exemplul de cod anterior, care a detectat clicuri din exterior în interiorul componentei Acasă. Diferența este că este reutilizabil.

Pentru a-l folosi, importați-l în componenta de acasă și transmiteți o funcție de apel invers și un obiect ref.

const hideDiv = () => {
consolă.Buturuga(„Div ascuns”);
};
useOutsideClick (closeModal, outerRef);

Această abordare abstrage logica detectării clicurilor din afara unui element și face codul mai ușor de citit.

Îmbunătățiți experiența utilizatorului prin detectarea clicurilor din afara unei componente

Fie că este vorba de închiderea unui meniu derulant, de închiderea unui mod sau de comutarea vizibilității anumitor elemente, detectarea clicurilor în afara unei componente permite o experiență de utilizator intuitivă și fără întreruperi. În React, puteți utiliza obiectele de referință și puteți face clic pe handlere de evenimente pentru a crea un cârlig personalizat pe care îl puteți reutiliza în aplicația dvs.