So erkennen Sie Klicks außerhalb einer React-Komponente mithilfe eines benutzerdefinierten Hooks

Viele Benutzeroberflächen verwenden Komponenten, die auf der Grundlage von Ereignissen wie einem Klick auf eine Schaltfläche angezeigt werden. Wenn Sie mit einer solchen Komponente arbeiten, benötigen Sie eine Möglichkeit, sie wieder auszublenden, normalerweise als Reaktion auf einen Klick außerhalb ihrer Begrenzung.

Dieses Muster ist besonders nützlich für Komponenten wie Modalmenüs oder Slide-in-Menüs.

Umgang mit Klicks außerhalb eines Elements

Angenommen, Ihre Anwendung enthält das folgende Markup und Sie möchten das innere Element schließen, wenn Sie auf das äußere Element klicken:

<ÄußeresElement>
<InnerElement/>
ÄußeresElement>

Um Klicks außerhalb eines Elements zu verarbeiten, müssen Sie dies tun Fügen Sie einen Ereignis-Listener hinzu zum äußeren Element. Wenn dann ein Klickereignis auftritt, greifen Sie auf das Ereignisobjekt zu und untersuchen Sie dessen Zieleigenschaft.

Wenn das Ereignisziel das innere Element nicht enthält, bedeutet dies, dass das Klickereignis nicht innerhalb des inneren Elements ausgelöst wurde. In diesem Fall sollten Sie das innere Element aus dem DOM entfernen oder ausblenden.

Dies ist eine allgemeine Erklärung, wie Sie mit Klicks außerhalb eines Elements umgehen. Um zu sehen, wie dies in einer React-App funktionieren würde, müssen Sie es tun Erstellen Sie ein neues React-Projekt mit Vite.

Sie können das Projekt mit anderen Methoden erstellen oder einfach ein vorhandenes Projekt verwenden.

Umgang mit Klicks außerhalb eines Elements in einer React-Anwendung

Erstellen Sie auf der Grundlage Ihres Projekts eine neue Datei mit dem Namen Home.jsx und fügen Sie den folgenden Code hinzu, um ein Div zu erstellen, das ausgeblendet werden soll, wenn Sie auf das Abschnittselement klicken.

importieren { useEffect, useRef } aus"reagieren";
Exportconst Zuhause = () => {
const äußereRef = useRef();
 useEffect(() => {
const handleClickOutside = (e) => {
Wenn (outerRef.current && !outerRef.current.contains (e.target)) {
// Div ausblenden oder beliebige Aktion ausführen
 }
 };
dokumentieren.addEventListener("klicken", handleClickOutside);
zurückkehren() => {
dokumentieren.removeEventListener("klicken", handleClickOutside);
 };
 }, []);
zurückkehren (

Breite: „200px“, Höhe: „200px“, Hintergrund: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Dieser Code verwendet den useRef-Hook, um ein Objekt mit dem Namen zu erstellen äußereRef. Anschließend wird über die ref-Eigenschaft des div-Elements auf dieses Objekt verwiesen.

Du kannst den... benutzen useEffect Hook, um der Seite einen Ereignis-Listener hinzuzufügen. Der Hörer ruft hier die handleClickOutside Funktion, wenn ein Benutzer das Klickereignis auslöst. Der useEffect Hook gibt außerdem eine Bereinigungsfunktion zurück, die den Ereignis-Listener entfernt, wenn die Bereitstellung der Home-Komponente aufgehoben wird. Dadurch wird sichergestellt, dass es keine Speicherlecks gibt.

Die Funktion handleClickOutside prüft, ob das Ereignisziel das div-Element ist. Das ref-Objekt stellt die Informationen des Elements bereit, auf das es in einem Objekt namens „current“ verweist. Sie können überprüfen, ob das div-Element den Listener ausgelöst hat, indem Sie bestätigen, dass es kein event.target enthält. Wenn dies nicht der Fall ist, können Sie das Div ausblenden.

Erstellen eines benutzerdefinierten Hooks zum Verarbeiten von Klicks außerhalb einer Komponente

Mit einem benutzerdefinierten Hook können Sie diese Funktionalität in mehreren Komponenten wiederverwenden, ohne sie jedes Mal neu definieren zu müssen.

Dieser Hook sollte zwei Argumente akzeptieren, eine Callback-Funktion und ein Ref-Objekt.

In diesem Hook ist die Callback-Funktion die Funktion, die aufgerufen wird, wenn Sie auf das Leerzeichen außerhalb des Zielelements klicken. Das ref-Objekt verweist auf die äußere Komponente.

Um den Hook zu erstellen, fügen Sie eine neue Datei mit dem Namen hinzu Verwenden Sie ClickOutside zu Ihrem Projekt und fügen Sie den folgenden Code hinzu:

importieren { useEffect } aus"reagieren";
Exportconst useOutsideClick = (Rückruf, Ref) => {
const handleClickOutside = (Fall) => {
Wenn (ref.current && !ref.current.contains (event.target)) {
 Ruf zurück();
 }
 };
 useEffect(() => {
dokumentieren.addEventListener("klicken", handleClickOutside);
zurückkehren() => {
dokumentieren.removeEventListener("klicken", handleClickOutside);
 };
 });
};

Dieser Hook funktioniert auf die gleiche Weise wie das vorherige Codebeispiel, das externe Klicks innerhalb der Home-Komponente erkannte. Der Unterschied besteht darin, dass es wiederverwendbar ist.

Um es zu verwenden, importieren Sie es in die Home-Komponente und übergeben Sie eine Rückruffunktion und ein Ref-Objekt.

const hideDiv = () => {
Konsole.Protokoll(„Verstecktes Div“);
};
useOutsideClick (closeModal, äußereRef);

Dieser Ansatz abstrahiert die Logik der Erkennung von Klicks außerhalb eines Elements und erleichtert die Lesbarkeit Ihres Codes.

Verbessern Sie die Benutzererfahrung, indem Sie Klicks außerhalb einer Komponente erkennen

Ob es darum geht, ein Dropdown-Menü zu schließen, ein Modal zu schließen oder die Sichtbarkeit bestimmter Elemente umzuschalten – die Erkennung von Klicks außerhalb einer Komponente ermöglicht ein intuitives und nahtloses Benutzererlebnis. In React können Sie die Ref-Objekte verwenden und auf Ereignishandler klicken, um einen benutzerdefinierten Hook zu erstellen, den Sie in Ihrer Anwendung wiederverwenden können.