Come rilevare i clic all'esterno di un componente React utilizzando un hook personalizzato

Molte interfacce utente utilizzano componenti che vengono visualizzati in base a eventi come il clic di un pulsante. Quando lavori con un componente di questo tipo, vorrai un modo per nasconderlo di nuovo, di solito in risposta a un clic al di fuori del suo confine.

Questo modello è particolarmente utile per componenti come modali o menu a scorrimento.

Gestione dei clic all'esterno di un elemento

Supponendo che tu abbia il seguente markup nella tua applicazione e desideri chiudere l'elemento interno quando fai clic sull'elemento esterno:

<OuterElement>
<InnerElement/>
OuterElement>

Per gestire i clic all'esterno di un elemento, è necessario collegare un listener di eventi all'elemento esterno. Quindi, quando si verifica un evento click, accedi all'oggetto evento ed esaminane la proprietà target.

Se il target dell'evento non contiene l'elemento interno, significa che l'evento clic non è stato attivato all'interno dell'elemento interno. In questo caso, dovresti rimuovere o nascondere l'elemento interno dal DOM.

Questa è una spiegazione di alto livello di come gestisci i clic all'esterno di un elemento. Per vedere come funzionerebbe in un'app React, dovrai farlo crea un nuovo progetto React usando Vite.

È possibile creare il progetto utilizzando altri metodi o semplicemente utilizzare un progetto esistente.

Gestione dei clic all'esterno di un elemento in un'applicazione React

Alla base del tuo progetto, crea un nuovo file chiamato Home.jsx e aggiungi il seguente codice per creare un div che dovrebbe nascondersi quando fai clic sull'elemento section.

importare {usaEffetto, usaRif} da"reagire";
esportarecost Casa = () => {
cost outerRef = useRef();
 usaEffetto(() => {
cost handleClickOutside = (e) => {
Se (outerRef.current && !outerRef.current.contains (e.target)) {
// Nascondi il div o esegui qualsiasi azione desiderata
 }
 };
documento.addEventListener("clic", handleClickOutside);
ritorno() => {
documento.removeEventListener("clic", handleClickOutside);
 };
 }, []);
ritorno (

larghezza: "200px", altezza: "200px", sfondo: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Questo codice utilizza l'hook useRef per creare un oggetto denominato esternoRef. Quindi fa riferimento a questo oggetto tramite la proprietà ref dell'elemento div.

Puoi usare il useEffect hook per aggiungere un listener di eventi alla pagina. L'ascoltatore qui chiama il handleClickOutside funzione quando un utente attiva l'evento clic. IL useEffect hook restituisce anche una funzione di pulizia che rimuove il listener di eventi quando il componente Home viene smontato. Ciò garantisce che non vi siano perdite di memoria.

La funzione handleClickOutside verifica se la destinazione dell'evento è l'elemento div. L'oggetto ref fornisce le informazioni dell'elemento a cui fa riferimento in un oggetto chiamato current. Puoi controllarlo per vedere se l'elemento div ha attivato l'ascoltatore confermando che non contiene event.target. In caso contrario, puoi nascondere il div.

Creazione di un hook personalizzato per la gestione dei clic all'esterno di un componente

Un hook personalizzato ti consentirebbe di riutilizzare questa funzionalità in più componenti senza doverla definire ogni volta.

Questo hook dovrebbe accettare due argomenti, una funzione di callback e un oggetto ref.

In questo hook, la funzione di callback è la funzione che viene chiamata quando fai clic sullo spazio all'esterno dell'elemento di destinazione. L'oggetto ref fa riferimento al componente esterno.

Per creare l'hook, aggiungi un nuovo file denominato usa ClickOutside al tuo progetto e aggiungi il seguente codice:

importare {usaEffetto} da"reagire";
esportarecost useOutsideClick = (richiamo, rif) => {
cost handleClickOutside = (evento) => {
Se (ref.current && !ref.current.contains (event.target)) {
 richiamare();
 }
 };
 usaEffetto(() => {
documento.addEventListener("clic", handleClickOutside);
ritorno() => {
documento.removeEventListener("clic", handleClickOutside);
 };
 });
};

Questo hook funziona allo stesso modo dell'esempio di codice precedente, che rilevava i clic esterni all'interno del componente Home. La differenza è che è riutilizzabile.

Per usarlo, importalo nel componente home e passa una funzione di callback e un oggetto ref.

cost nascondiDiv = () => {
consolare.tronco d'albero("Div nascosto");
};
useOutsideClick (closeModal, outerRef);

Questo approccio astrae la logica del rilevamento dei clic all'esterno di un elemento e semplifica la lettura del codice.

Migliora l'esperienza utente rilevando i clic all'esterno di un componente

Che si tratti di chiudere un menu a discesa, ignorare un modale o attivare o disattivare la visibilità di determinati elementi, il rilevamento dei clic all'esterno di un componente consente un'esperienza utente intuitiva e senza soluzione di continuità. In React, puoi utilizzare gli oggetti ref e i gestori di eventi click per creare un hook personalizzato che puoi riutilizzare nell'applicazione.