Wie kann ich Klicks außerhalb einer React-Komponente erkennen?

Klicks außerhalb der Reaktionskomponente erkennen

Das vorgestellte Szenario beinhaltet die Erkennung von Klickereignissen, die außerhalb einer bestimmten Komponente auftreten. Die Methode „closest()“ von jQuery prüft normalerweise, ob das Klickereignisziel das DOM-Element der Komponente als übergeordnetes Element hat, was auf einen Klick innerhalb der Komponente hinweist.

ES6-Implementierung

Die bereitgestellten Die ES6-Lösung nutzt den useOutsideAlerter-Hook, der einen Verweis als Argument akzeptiert. Innerhalb des Hooks wird dem Dokument ein Click-Handler hinzugefügt. Wenn ein Klick erfolgt, wird das Ziel mit dem aktuellen Element der Referenz verglichen. Wenn das Ziel nicht in der Komponente enthalten ist, wird eine Warnung angezeigt.

Die OutsideAlerter-Komponente umschließt untergeordnete Inhalte und wendet den Hook auf die Referenz ihres Containers an. Beim Klicken außerhalb des Containers wird eine Warnung ausgelöst.

Klassenbasierte Implementierung (nach React 16.3)

In dieser Implementierung erweitert die OutsideAlerter-Komponente die Komponente und definiert den Lebenszyklus Methoden. Die Methoden „componentDidMount“ und „componentWillUnmount“ fügen den Click-Handler zum Dokument hinzu bzw. entfernen ihn daraus. Die Methode handleClickOutside prüft auf Klicks außerhalb der Komponente und zeigt bei Bedarf eine Warnung an.

Klassenbasierte Implementierung (vor React 16.3)

Zuvor wird ein etwas anderer Ansatz verwendet Reagieren 16.3. Die Komponente verfügt über eine setWrapperRef-Methode, die die Referenz des Wrappers festlegt. Die Methode handleClickOutside sucht nach Klicks außerhalb der Komponente und zeigt bei Bedarf eine Warnung an.

Unabhängig von der Implementierung ermöglichen diese Lösungen die Erkennung von Klickereignissen außerhalb einer bestimmten React-Komponente und bieten so eine verbesserte Kontrolle über Benutzerinteraktionen.

Das obige ist der detaillierte Inhalt vonWie kann ich Klicks außerhalb einer React-Komponente erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!