Klick außerhalb der React-Komponente erkennen

Ich suche nach einer Möglichkeit zu erkennen, ob ein Klickereignis außerhalb einer Komponente aufgetreten ist, wie in this beschrieben Artikel. jQuery next() wird verwendet, um zu sehen, ob das Ziel eines Klickereignisses das dom-Element als eines seiner Eltern hat. Wenn es eine Übereinstimmung gibt, gehört das Click-Ereignis zu einem der Kinder und wird daher nicht als außerhalb der Komponente liegend betrachtet.

Also möchte ich in meiner Komponente einen Click-Handler an das Fenster anhängen. Wenn der Handler feuert, muss ich das Ziel mit den dom-Kindern meiner Komponente vergleichen.

Das Click-Ereignis enthält Eigenschaften wie “Pfad”, die den Dom-Pfad zu enthalten scheinen, den das Ereignis zurückgelegt hat. Ich bin mir nicht sicher, was ich vergleichen oder wie ich es am besten durchqueren soll, und ich denke, jemand muss das bereits in eine clevere Hilfsfunktion gesteckt haben … Nein?

Aktualisierung 2021:

Es ist eine Weile her, seit ich diese Antwort hinzugefügt habe, und da sie immer noch auf Interesse zu stoßen scheint, dachte ich, ich würde sie auf eine aktuellere React-Version aktualisieren. Im Jahr 2021 würde ich diese Komponente so schreiben:

import React, { useState } from "react";
import "./DropDown.css";

export function DropDown({ options, callback }) {
    const [selected, setSelected] = useState("");
    const [expanded, setExpanded] = useState(false);

    function expand() {
        setExpanded(true);
    }

    function close() {
        setExpanded(false);
    }

    function select(event) {
        const value = event.target.textContent;
        callback(value);
        close();
        setSelected(value);
    }

    return (
        <div className="dropdown" tabIndex={0} onFocus={expand} onBlur={close} >
            <div>{selected}</div>
            {expanded ? (
                <div className={"dropdown-options-list"}>
                    {options.map((O) => (
                        <div className={"dropdown-option"} onClick={select}>
                            {O}
                        </div>
                    ))}
                </div>
            ) : null}
        </div>
    );
}

Ursprüngliche Antwort (2016):

Hier ist die Lösung, die für mich am besten funktioniert hat, ohne Ereignisse an den Container anzuhängen:

Bestimmte HTML-Elemente können das haben, was als “Fokus“, zum Beispiel Eingabeelemente. Diese Elemente reagieren auch auf die verwischen Ereignis, wenn sie diesen Fokus verlieren.

Um jedem Element die Möglichkeit zu geben, den Fokus zu haben, stellen Sie einfach sicher, dass sein tabindex-Attribut auf etwas anderes als -1 gesetzt ist. In normalem HTML wäre das durch das Setzen von tabindex Attribut, aber in React müssen Sie verwenden tabIndex (Beachte die Hauptstadt I).

Sie können dies auch über JavaScript mit tun element.setAttribute('tabindex',0)

Dafür habe ich es verwendet, um ein benutzerdefiniertes DropDown-Menü zu erstellen.

var DropDownMenu = React.createClass({
    getInitialState: function(){
        return {
            expanded: false
        }
    },
    expand: function(){
        this.setState({expanded: true});
    },
    collapse: function(){
        this.setState({expanded: false});
    },
    render: function(){
        if(this.state.expanded){
            var dropdown = ...; //the dropdown content
        } else {
            var dropdown = undefined;
        }
        
        return (
            <div className="dropDownMenu" tabIndex="0" onBlur={ this.collapse } >
                <div className="currentValue" onClick={this.expand}>
                    {this.props.displayValue}
                </div>
                {dropdown}
            </div>
        );
    }
});

Nachdem ich hier viele Methoden ausprobiert hatte, entschied ich mich dafür github.com/Pomax/react-onclickoutside weil es so vollständig ist.

Ich habe das Modul über npm installiert und in meine Komponente importiert:

import onClickOutside from 'react-onclickoutside'

Dann habe ich in meiner Komponentenklasse die definiert handleClickOutside Methode:

handleClickOutside = () => {
  console.log('onClickOutside() method called')
}

Und beim Exportieren meiner Komponente habe ich sie eingepackt onClickOutside():

export default onClickOutside(NameOfComponent)

Das ist es.

Hook-Implementierung basierend auf Tanner Linsley’s Excellent Vortrag auf der JSConf Hawaii 2020:

useOuterClick API

const Client = () => {
  const innerRef = useOuterClick(ev => {/*event handler code on outer click*/});
  return <div ref={innerRef}> Inside </div> 
};

Implementierung

function useOuterClick(callback) {
  const callbackRef = useRef(); // initialize mutable ref, which stores callback
  const innerRef = useRef(); // returned to client, who marks "border" element

  // update cb on each render, so second useEffect has access to current value 
  useEffect(() => { callbackRef.current = callback; });
  
  useEffect(() => {
    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);
    function handleClick(e) {
      if (innerRef.current && callbackRef.current && 
        !innerRef.current.contains(e.target)
      ) callbackRef.current(e);
    }
  }, []); // no dependencies -> stable click listener
      
  return innerRef; // convenience for client (doesn't need to init ref himself) 
}

Hier ist ein funktionierendes Beispiel:

/*
  Custom Hook
*/
function useOuterClick(callback) {
  const innerRef = useRef();
  const callbackRef = useRef();

  // set current callback in ref, before second useEffect uses it
  useEffect(() => { // useEffect wrapper to be safe for concurrent mode
    callbackRef.current = callback;
  });

  useEffect(() => {
    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);

    // read most recent callback and innerRef dom node from refs
    function handleClick(e) {
      if (
        innerRef.current && 
        callbackRef.current &&
        !innerRef.current.contains(e.target)
      ) {
        callbackRef.current(e);
      }
    }
  }, []); // no need for callback + innerRef dep
  
  return innerRef; // return ref; client can omit `useRef`
}

/*
  Usage 
*/
const Client = () => {
  const [counter, setCounter] = useState(0);
  const innerRef = useOuterClick(e => {
    // counter state is up-to-date, when handler is called
    alert(`Clicked outside! Increment counter to ${counter + 1}`);
    setCounter(c => c + 1);
  });
  return (
    <div>
      <p>Click outside!</p>
      <div id="container" ref={innerRef}>
        Inside, counter: {counter}
      </div>
    </div>
  );
};

ReactDOM.render(<Client />, document.getElementById("root"));

#container { border: 1px solid red; padding: 20px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js" integrity="sha256-Ef0vObdWpkMAnxp39TYSLVS/vVUokDE8CDFnx7tjY6U=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js" integrity="sha256-p2yuFdE8hNZsQ31Qk+s8N+Me2fL5cc6NKXOC0U9uGww=" crossorigin="anonymous"></script>
<script> var {useRef, useEffect, useCallback, useState} = React</script>
<div id="root"></div>

Wichtige Punkte

• useOuterClick nutzt veränderliche Verweise mager zu bieten Client API
• stabil Klicken Sie auf den Listener für die Lebensdauer der enthaltenden Komponente ([] Tiefen)
• Client kann Rückruf einstellen, ohne ihn auswendig lernen zu müssen useCallback
• Callback-Body hat Zugriff auf die neuesten Requisiten und Status – keine veralteten Abschlusswerte

(Randbemerkung für iOS)

iOS behandelt im Allgemeinen nur bestimmte Elemente als anklickbar. Damit äußere Klicks funktionieren, wählen Sie einen anderen Klick-Listener als aus document – nichts nach oben inklusive body. Fügen Sie zB einen Listener im React-Root hinzu div und erweitern Sie seine Höhe, wie height: 100vh, um alle externen Klicks zu erfassen. Quelle: quirksmode.org

[Update] Lösung mit Reagieren ^16.8 verwenden Haken

CodeSandbox

import React, { useEffect, useRef, useState } from 'react';

const SampleComponent = () => {
    const [clickedOutside, setClickedOutside] = useState(false);
    const myRef = useRef();

    const handleClickOutside = e => {
        if (!myRef.current.contains(e.target)) {
            setClickedOutside(true);
        }
    };

    const handleClickInside = () => setClickedOutside(false);

    useEffect(() => {
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    });

    return (
        <button ref={myRef} onClick={handleClickInside}>
            {clickedOutside ? 'Bye!' : 'Hello!'}
        </button>
    );
};

export default SampleComponent;

Lösung mit Reagieren ^16.3:

CodeSandbox

import React, { Component } from "react";

class SampleComponent extends Component {
  state = {
    clickedOutside: false
  };

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  myRef = React.createRef();

  handleClickOutside = e => {
    if (!this.myRef.current.contains(e.target)) {
      this.setState({ clickedOutside: true });
    }
  };

  handleClickInside = () => this.setState({ clickedOutside: false });

  render() {
    return (
      <button ref={this.myRef} onClick={this.handleClickInside}>
        {this.state.clickedOutside ? "Bye!" : "Hello!"}
      </button>
    );
  }
}

export default SampleComponent;