Ich suche nach einer Möglichkeit, um festzustellen, ob ein Klickereignis außerhalb einer Komponente aufgetreten ist, wie in diesem Artikel beschrieben . jQuery next () wird verwendet, um festzustellen, ob das Ziel eines Klickereignisses das dom-Element als eines seiner übergeordneten Elemente hat. Wenn eine Übereinstimmung vorliegt, gehört das Klickereignis zu einem der untergeordneten Elemente und wird daher nicht als außerhalb der Komponente befindlich betrachtet.

Daher möchte ich in meiner Komponente einen Klick-Handler an das Fenster anhängen. Wenn der Handler ausgelöst wird, muss ich das Ziel mit den dom-Kindern meiner Komponente vergleichen.

Das Klickereignis enthält Eigenschaften wie "Pfad", der den Dom-Pfad zu enthalten scheint, 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 Utility-Funktion gesteckt haben ... Nein?

Refs Verwendung in React 16.3+ geändert.

Die folgende Lösung verwendet ES6 und befolgt Best Practices zum Binden sowie zum Festlegen des Verweises durch eine Methode.

Um es in Aktion zu sehen:

• Klassenimplementierung
• Hooks-Implementierung

Klassenimplementierung:

import React, { Component } from 'react';

/**
 * Component that alerts if you click outside of it
 */
export default class OutsideAlerter extends Component {
    constructor(props) {
        super(props);

        this.wrapperRef = React.createRef();
        this.setWrapperRef = this.setWrapperRef.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);
    }

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

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

    /**
     * Alert if clicked on outside of element
     */
    handleClickOutside(event) {
        if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
            alert('You clicked outside of me!');
        }
    }

    render() {
        return <div ref={this.wrapperRef}>{this.props.children}</div>;
    }
}

OutsideAlerter.propTypes = {
    children: PropTypes.element.isRequired,
};

Implementierung von Hooks:

import React, { useRef, useEffect } from "react";

/**
 * Hook that alerts clicks outside of the passed ref
 */
function useOutsideAlerter(ref) {
    useEffect(() => {
        /**
         * Alert if clicked on outside of element
         */
        function handleClickOutside(event) {
            if (ref.current && !ref.current.contains(event.target)) {
                alert("You clicked outside of me!");
            }
        }

        // Bind the event listener
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            // Unbind the event listener on clean up
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [ref]);
}

/**
 * Component that alerts if you click outside of it
 */
export default function OutsideAlerter(props) {
    const wrapperRef = useRef(null);
    useOutsideAlerter(wrapperRef);

    return <div ref={wrapperRef}>{props.children}</div>;
}

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 einen sogenannten " Fokus " haben, beispielsweise Eingabeelemente. Diese Elemente reagieren auch auf das Unschärfeereignis , wenn sie diesen Fokus verlieren.

Um einem Element die Fähigkeit zu geben, sich zu konzentrieren, stellen Sie einfach sicher, dass sein tabindex-Attribut auf etwas anderes als -1 gesetzt ist. In normalem HTML würde dies durch Setzen des tabindexAttributs geschehen, aber in React müssen Sie verwenden tabIndex(beachten Sie das Großbuchstaben 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>
        );
    }
});

Ich war in der gleichen Frage festgefahren. Ich bin etwas spät zur Party hier, aber für mich ist das eine wirklich gute Lösung. Hoffentlich hilft es jemand anderem. Sie müssen Import findDOMNodevonreact-dom

import ReactDOM from 'react-dom';
// ... ✂

componentDidMount() {
    document.addEventListener('click', this.handleClickOutside, true);
}

componentWillUnmount() {
    document.removeEventListener('click', this.handleClickOutside, true);
}

handleClickOutside = event => {
    const domNode = ReactDOM.findDOMNode(this);

    if (!domNode || !domNode.contains(event.target)) {
        this.setState({
            visible: false
        });
    }
}

React Hooks Approach (16.8 +)

Sie können einen wiederverwendbaren Hook namens erstellen useComponentVisible.

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

export default function useComponentVisible(initialIsVisible) {
    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
    const ref = useRef(null);

    const handleClickOutside = (event) => {
        if (ref.current && !ref.current.contains(event.target)) {
            setIsComponentVisible(false);
        }
    };

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

    return { ref, isComponentVisible, setIsComponentVisible };
}

Dann möchten Sie in der Komponente die Funktionalität hinzufügen, um Folgendes zu tun:

const DropDown = () => {
    const { ref, isComponentVisible } = useComponentVisible(true);
    return (
       <div ref={ref}>
          {isComponentVisible && (<p>Dropdown Component</p>)}
       </div>
    );

}

Hier finden Sie ein Code- und Box- Beispiel.

Nachdem ich hier viele Methoden ausprobiert hatte, entschied ich mich, github.com/Pomax/react-onclickoutside zu verwenden, da es 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 handleClickOutsideMethode definiert :

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

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

export default onClickOutside(NameOfComponent)

Das ist es.

Ich habe dank Ben Alpert auf diskut.reactjs.org eine Lösung gefunden . Der vorgeschlagene Ansatz fügt dem Dokument einen Handler hinzu, der sich jedoch als problematisch herausstellte. Das Klicken auf eine der Komponenten in meinem Baum führte zu einem erneuten Rendern, bei dem das angeklickte Element beim Aktualisieren entfernt wurde. Da das erneute Rendern von React erfolgt, bevor der Dokumentkörper-Handler aufgerufen wird, wurde das Element nicht als "innerhalb" des Baums erkannt.

Die Lösung hierfür bestand darin, den Handler zum Anwendungsstammelement hinzuzufügen.

Main:

window.__myapp_container = document.getElementById('app')
React.render(<App/>, window.__myapp_container)

Komponente:

import { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

export default class ClickListener extends Component {

  static propTypes = {
    children: PropTypes.node.isRequired,
    onClickOutside: PropTypes.func.isRequired
  }

  componentDidMount () {
    window.__myapp_container.addEventListener('click', this.handleDocumentClick)
  }

  componentWillUnmount () {
    window.__myapp_container.removeEventListener('click', this.handleDocumentClick)
  }

  /* using fat arrow to bind to instance */
  handleDocumentClick = (evt) => {
    const area = ReactDOM.findDOMNode(this.refs.area);

    if (!area.contains(evt.target)) {
      this.props.onClickOutside(evt)
    }
  }

  render () {
    return (
      <div ref='area'>
       {this.props.children}
      </div>
    )
  }
}

Hook-Implementierung basierend auf Tanner Linsleys ausgezeichnetem Vortrag auf der JSConf Hawaii 2020 :

useOuterClick Hook-API

const Client = () => {
  const innerRef = useOuterClick(ev => { /* what you want do on outer click */ });
  return <div ref={innerRef}> Inside </div> 
};

Implementierung

/*
  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>

useOuterClickverwendet veränderbare Verweise , um eine schlanke API für die zu erstellen Client. Ein Rückruf kann eingestellt werden, ohne dass Sie ihn über merken müssen useCallback. Der Rückrufkörper hat weiterhin Zugriff auf die neuesten Requisiten und den neuesten Status (keine veralteten Schließungswerte).

Hinweis für iOS-Benutzer

iOS behandelt nur bestimmte Elemente als anklickbar. Um dieses Verhalten zu umgehen, wählen Sie einen anderen äußeren Klick-Listener als document- nichts nach oben, einschließlich body. Sie können divbeispielsweise im obigen Beispiel einen Listener zum React-Stamm hinzufügen und dessen Höhe ( height: 100vhoder ähnlich) erweitern, um alle externen Klicks zu erfassen. Quellen: quirksmode.org und diese Antwort

Keine der anderen Antworten hier hat bei mir funktioniert. Ich habe versucht, ein Popup bei Unschärfe auszublenden, aber da der Inhalt absolut positioniert war, wurde der onBlur auch beim Klicken auf den inneren Inhalt ausgelöst.

Hier ist ein Ansatz, der für mich funktioniert hat:

// Inside the component:
onBlur(event) {
    // currentTarget refers to this component.
    // relatedTarget refers to the element where the user clicked (or focused) which
    // triggered this event.
    // So in effect, this condition checks if the user clicked outside the component.
    if (!event.currentTarget.contains(event.relatedTarget)) {
        // do your thing.
    }
},

Hoffe das hilft.

[Update] Lösung mit React ^ 16.8 mit Hooks

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 Reaktion ^ 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;

Hier ist mein Ansatz (Demo - https://jsfiddle.net/agymay93/4/ ):

Ich habe eine spezielle Komponente namens erstellt WatchClickOutsideund sie kann wie folgt verwendet werden (ich nehme die JSXSyntax an):

<WatchClickOutside onClickOutside={this.handleClose}>
  <SomeDropdownEtc>
</WatchClickOutside>

Hier ist der Code der WatchClickOutsideKomponente:

import React, { Component } from 'react';

export default class WatchClickOutside extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  componentWillMount() {
    document.body.addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    // remember to remove all events to avoid memory leaks
    document.body.removeEventListener('click', this.handleClick);
  }

  handleClick(event) {
    const {container} = this.refs; // get container that we'll wait to be clicked outside
    const {onClickOutside} = this.props; // get click outside callback
    const {target} = event; // get direct click event target

    // if there is no proper callback - no point of checking
    if (typeof onClickOutside !== 'function') {
      return;
    }

    // if target is container - container was not clicked outside
    // if container contains clicked target - click was not outside of it
    if (target !== container && !container.contains(target)) {
      onClickOutside(event); // clicked outside - fire callback
    }
  }

  render() {
    return (
      <div ref="container">
        {this.props.children}
      </div>
    );
  }
}

Dies hat bereits viele Antworten, aber sie adressieren e.stopPropagation()und verhindern nicht das Klicken auf Reaktionslinks außerhalb des Elements, das Sie schließen möchten.

Aufgrund der Tatsache, dass React über einen eigenen künstlichen Ereignishandler verfügt, können Sie das Dokument nicht als Basis für Ereignis-Listener verwenden. Sie müssen dies e.stopPropagation()vorher tun, da React das Dokument selbst verwendet. Wenn Sie document.querySelector('body')stattdessen zum Beispiel verwenden. Sie können das Klicken über den Link Reagieren verhindern. Im Folgenden finden Sie ein Beispiel für die Implementierung von Click Outside und Close.
Dies verwendet ES6 und React 16.3 .

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
    };

    this.insideContainer = React.createRef();
  }

  componentWillMount() {
    document.querySelector('body').addEventListener("click", this.handleClick, false);
  }

  componentWillUnmount() {
    document.querySelector('body').removeEventListener("click", this.handleClick, false);
  }

  handleClick(e) {
    /* Check that we've clicked outside of the container and that it is open */
    if (!this.insideContainer.current.contains(e.target) && this.state.isOpen === true) {
      e.preventDefault();
      e.stopPropagation();
      this.setState({
        isOpen: false,
      })
    }
  };

  togggleOpenHandler(e) {
    e.preventDefault();

    this.setState({
      isOpen: !this.state.isOpen,
    })
  }

  render(){
    return(
      <div>
        <span ref={this.insideContainer}>
          <a href="#open-container" onClick={(e) => this.togggleOpenHandler(e)}>Open me</a>
        </span>
        <a href="/" onClick({/* clickHandler */})>
          Will not trigger a click when inside is open.
        </a>
      </div>
    );
  }
}

export default App;

Für diejenigen, die eine absolute Positionierung benötigen, ist eine einfache Option, für die ich mich entschieden habe, das Hinzufügen einer Wrapper-Komponente, die so gestaltet ist, dass sie die gesamte Seite mit einem transparenten Hintergrund abdeckt. Anschließend können Sie einen onClick auf dieses Element hinzufügen, um Ihre interne Komponente zu schließen.

<div style={{
        position: 'fixed',
        top: '0', right: '0', bottom: '0', left: '0',
        zIndex: '1000',
      }} onClick={() => handleOutsideClick()} >
    <Content style={{position: 'absolute'}}/>
</div>

Wie im Moment, wenn Sie einen Klick-Handler für Inhalte hinzufügen, wird das Ereignis auch an das obere Div weitergegeben und löst daher den handlerOutsideClick aus. Wenn dies nicht Ihr gewünschtes Verhalten ist, stoppen Sie einfach die Ereignisprogation auf Ihrem Handler.

<Content style={{position: 'absolute'}} onClick={e => {
                                          e.stopPropagation();
                                          desiredFunctionCall();
                                        }}/>

`

Um die akzeptierte Antwort von Ben Bud zu erweitern , wenn Sie gestylte Komponenten verwenden, erhalten Sie beim Übergeben von Refs auf diese Weise einen Fehler wie "this.wrapperRef.contains ist keine Funktion".

Die in den Kommentaren vorgeschlagene Korrektur, die gestaltete Komponente mit einem Div zu versehen und den Ref dort zu übergeben, funktioniert. Allerdings erklären sie in ihren Dokumenten bereits den Grund dafür und die ordnungsgemäße Verwendung von Refs in gestalteten Komponenten:

Wenn Sie eine Ref-Requisite an eine gestaltete Komponente übergeben, erhalten Sie eine Instanz des StyledComponent-Wrappers, jedoch nicht an den zugrunde liegenden DOM-Knoten. Dies liegt daran, wie Refs funktionieren. Es ist nicht möglich, DOM-Methoden wie focus direkt auf unsere Wrapper aufzurufen. Übergeben Sie den Rückruf stattdessen an die innerRef-Requisite, um eine Referenz zum tatsächlichen, umschlossenen DOM-Knoten zu erhalten.

Wie so:

<StyledDiv innerRef={el => { this.el = el }} />

Dann können Sie direkt über die Funktion "handleClickOutside" darauf zugreifen:

handleClickOutside = e => {
    if (this.el && !this.el.contains(e.target)) {
        console.log('clicked outside')
    }
}

Dies gilt auch für den "onBlur" -Ansatz:

componentDidMount(){
    this.el.focus()
}
blurHandler = () => {
    console.log('clicked outside')
}
render(){
    return(
        <StyledDiv
            onBlur={this.blurHandler}
            tabIndex="0"
            innerRef={el => { this.el = el }}
        />
    )
}

Material-UI hat eine kleine Komponente, um dieses Problem zu lösen: https://material-ui.com/components/click-away-listener/ , die Sie auswählen können. Es wiegt 1,5 kB gezippt und unterstützt Mobile, IE 11 und Portale.

Mein größtes Anliegen bei allen anderen Antworten ist es, Klickereignisse vom Stammverzeichnis / übergeordneten Element nach unten zu filtern. Ich fand, der einfachste Weg war, einfach ein Geschwisterelement mit der Position festzusetzen: fest, einen Z-Index 1 hinter dem Dropdown und das Klickereignis auf das feste Element innerhalb derselben Komponente zu behandeln. Hält alles zentral für eine bestimmte Komponente.

Beispielcode

#HTML
<div className="parent">
  <div className={`dropdown ${this.state.open ? open : ''}`}>
    ...content
  </div>
  <div className="outer-handler" onClick={() => this.setState({open: false})}>
  </div>
</div>

#SASS
.dropdown {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  &.open {
    display: block;
  }
}
.outer-handler {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 99;
    display: none;
    &.open {
      display: block;
    }
}

componentWillMount(){

  document.addEventListener('mousedown', this.handleClickOutside)
}

handleClickOutside(event) {

  if(event.path[0].id !== 'your-button'){
     this.setState({showWhatever: false})
  }
}

Ereignis path[0]ist das letzte angeklickte Element

Ich habe dieses Modul verwendet (ich habe keine Verbindung zum Autor)

npm install react-onclickout --save

const ClickOutHandler = require('react-onclickout');
 
class ExampleComponent extends React.Component {
 
  onClickOut(e) {
    if (hasClass(e.target, 'ignore-me')) return;
    alert('user clicked outside of the component!');
  }
 
  render() {
    return (
      <ClickOutHandler onClickOut={this.onClickOut}>
        <div>Click outside of me!</div>
      </ClickOutHandler>
    );
  }
}

Es hat den Job gut gemacht.

Ich habe dies teilweise getan, indem ich dies befolgt habe und indem ich den offiziellen React-Dokumenten zum Umgang mit Refs gefolgt bin, die eine Reaktion erfordern ^ 16.3. Dies ist das einzige, was für mich funktioniert hat, nachdem ich einige der anderen Vorschläge hier ausprobiert habe ...

class App extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  componentWillMount() {
    document.addEventListener("mousedown", this.handleClick, false);
  }
  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClick, false);
  }
  handleClick = e => {
    if (this.inputRef.current === e.target) {
      return;
    }
    this.handleclickOutside();
  };
handleClickOutside(){
...***code to handle what to do when clicked outside***...
}
render(){
return(
<div>
...***code for what's outside***...
<span ref={this.inputRef}>
...***code for what's "inside"***...
</span>
...***code for what's outside***
)}}

Ein Beispiel mit Strategie

Ich mag die bereitgestellten Lösungen, die das Gleiche tun, indem sie einen Wrapper um die Komponente erstellen.

Da dies eher ein Verhalten ist, dachte ich an Strategie und kam auf Folgendes.

Ich bin neu bei React und brauche ein bisschen Hilfe, um in den Anwendungsfällen etwas Boilerplate zu sparen

Bitte überprüfen Sie und sagen Sie mir, was Sie denken.

ClickOutsideBehavior

import ReactDOM from 'react-dom';

export default class ClickOutsideBehavior {

  constructor({component, appContainer, onClickOutside}) {

    // Can I extend the passed component's lifecycle events from here?
    this.component = component;
    this.appContainer = appContainer;
    this.onClickOutside = onClickOutside;
  }

  enable() {

    this.appContainer.addEventListener('click', this.handleDocumentClick);
  }

  disable() {

    this.appContainer.removeEventListener('click', this.handleDocumentClick);
  }

  handleDocumentClick = (event) => {

    const area = ReactDOM.findDOMNode(this.component);

    if (!area.contains(event.target)) {
        this.onClickOutside(event)
    }
  }
}

Beispielnutzung

import React, {Component} from 'react';
import {APP_CONTAINER} from '../const';
import ClickOutsideBehavior from '../ClickOutsideBehavior';

export default class AddCardControl extends Component {

  constructor() {
    super();

    this.state = {
      toggledOn: false,
      text: ''
    };

    this.clickOutsideStrategy = new ClickOutsideBehavior({
      component: this,
      appContainer: APP_CONTAINER,
      onClickOutside: () => this.toggleState(false)
    });
  }

  componentDidMount () {

    this.setState({toggledOn: !!this.props.toggledOn});
    this.clickOutsideStrategy.enable();
  }

  componentWillUnmount () {
    this.clickOutsideStrategy.disable();
  }

  toggleState(isOn) {

    this.setState({toggledOn: isOn});
  }

  render() {...}
}

Anmerkungen

Ich dachte daran, die übergebenen componentLifecycle-Hooks zu speichern und sie mit ähnlichen Methoden zu überschreiben:

const baseDidMount = component.componentDidMount;

component.componentDidMount = () => {
  this.enable();
  baseDidMount.call(component)
}

componentist die Komponente, die an den Konstruktor von übergeben wird ClickOutsideBehavior.
Dadurch wird das Aktivierungs- / Deaktivierungs-Boilerplate vom Benutzer dieses Verhaltens entfernt, aber es sieht nicht besonders gut aus

In meinem DROPDOWN-Fall funktionierte die Lösung von Ben Bud gut, aber ich hatte eine separate Umschalttaste mit einem onClick-Handler. Die äußere Klicklogik widersprach also der Schaltfläche onClick toggler. Hier ist, wie ich es gelöst habe, indem ich auch den Ref des Buttons übergeben habe:

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

/**
 * Hook that triggers onClose when clicked outside of ref and buttonRef elements
 */
function useOutsideClicker(ref, buttonRef, onOutsideClick) {
  useEffect(() => {

    function handleClickOutside(event) {
      /* clicked on the element itself */
      if (ref.current && !ref.current.contains(event.target)) {
        return;
      }

      /* clicked on the toggle button */
      if (buttonRef.current && !buttonRef.current.contains(event.target)) {
        return;
      }

      /* If it's something else, trigger onClose */
      onOutsideClick();
    }

    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
}

/**
 * Component that alerts if you click outside of it
 */
export default function DropdownMenu(props) {
  const wrapperRef = useRef(null);
  const buttonRef = useRef(null);
  const [dropdownVisible, setDropdownVisible] = useState(false);

  useOutsideClicker(wrapperRef, buttonRef, closeDropdown);

  const toggleDropdown = () => setDropdownVisible(visible => !visible);

  const closeDropdown = () => setDropdownVisible(false);

  return (
    <div>
      <button onClick={toggleDropdown} ref={buttonRef}>Dropdown Toggler</button>
      {dropdownVisible && <div ref={wrapperRef}>{props.children}</div>}
    </div>
  );
}

Wenn Sie eine winzige Komponente (466 Byte gzipped) verwenden möchten, die für diese Funktionalität bereits vorhanden ist, können Sie diesen React-Outclick dieser Bibliothek überprüfen .

Das Gute an der Bibliothek ist, dass Sie damit auch Klicks außerhalb einer Komponente und innerhalb einer anderen Komponente erkennen können. Es unterstützt auch das Erkennen anderer Arten von Ereignissen.

Wenn Sie eine winzige Komponente (466 Byte gzipped) verwenden möchten, die für diese Funktionalität bereits vorhanden ist, können Sie diesen React-Outclick dieser Bibliothek überprüfen . Es erfasst Ereignisse außerhalb einer Reaktionskomponente oder eines jsx-Elements.

Das Gute an der Bibliothek ist, dass Sie damit auch Klicks außerhalb einer Komponente und innerhalb einer anderen Komponente erkennen können. Es unterstützt auch das Erkennen anderer Arten von Ereignissen.

Ich weiß, dass dies eine alte Frage ist, aber ich stoße immer wieder darauf und hatte große Probleme, dies in einem einfachen Format herauszufinden. Wenn dies jemandem das Leben ein bisschen leichter machen würde, verwenden Sie OutsideClickHandler von airbnb. Es ist das einfachste Plugin, um diese Aufgabe zu erledigen, ohne eigenen Code zu schreiben.

Beispiel:

hideresults(){
   this.setState({show:false})
}
render(){
 return(
 <div><div onClick={() => this.setState({show:true})}>SHOW</div> {(this.state.show)? <OutsideClickHandler onOutsideClick={() => 
  {this.hideresults()}} > <div className="insideclick"></div> </OutsideClickHandler> :null}</div>
 )
}

import { useClickAway } from "react-use";

useClickAway(ref, () => console.log('OUTSIDE CLICKED'));

Sie können Ihnen einen einfachen Weg, um Ihr Problem zu lösen, ich zeige Ihnen:

....

const [dropDwonStatus , setDropDownStatus] = useState(false)

const openCloseDropDown = () =>{
 setDropDownStatus(prev => !prev)
}

const closeDropDown = ()=> {
 if(dropDwonStatus){
   setDropDownStatus(false)
 }
}
.
.
.
<parent onClick={closeDropDown}>
 <child onClick={openCloseDropDown} />
</parent>

das funktioniert bei mir, viel glück;)

Ich fand dies aus dem Artikel unten:

render () {return ({this.node = node;}}> Popover umschalten {this.state.popupVisible && (Ich bin ein Popover!)}); }}

Hier ist ein großartiger Artikel zu diesem Problem: "Klicks außerhalb von React-Komponenten verarbeiten" https://larsgraubner.com/handle-outside-clicks-react/

Fügen Sie onClickIhrem Container der obersten Ebene einen Handler hinzu und erhöhen Sie einen Statuswert, wenn der Benutzer darauf klickt. Übergeben Sie diesen Wert an die entsprechende Komponente, und wenn sich der Wert ändert, können Sie arbeiten.

In diesem Fall rufen wir auf, this.closeDropdown()wenn sich der clickCountWert ändert.

Die incrementClickCountMethode wird innerhalb des .appContainers ausgelöst, jedoch nicht, .dropdownweil wir sie verwenden event.stopPropagation(), um das Sprudeln von Ereignissen zu verhindern.

Ihr Code sieht möglicherweise folgendermaßen aus:

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            clickCount: 0
        };
    }
    incrementClickCount = () => {
        this.setState({
            clickCount: this.state.clickCount + 1
        });
    }
    render() {
        return (
            <div className="app" onClick={this.incrementClickCount}>
                <Dropdown clickCount={this.state.clickCount}/>
            </div>
        );
    }
}
class Dropdown extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false
        };
    }
    componentDidUpdate(prevProps) {
        if (this.props.clickCount !== prevProps.clickCount) {
            this.closeDropdown();
        }
    }
    toggleDropdown = event => {
        event.stopPropagation();
        return (this.state.open) ? this.closeDropdown() : this.openDropdown();
    }
    render() {
        return (
            <div className="dropdown" onClick={this.toggleDropdown}>
                ...
            </div>
        );
    }
}

Damit die "Fokus" -Lösung für Dropdown-Listen mit Ereignis-Listenern funktioniert, können Sie sie mit dem onMouseDown- Ereignis anstelle von onClick hinzufügen . Auf diese Weise wird das Ereignis ausgelöst und danach wird das Popup wie folgt geschlossen:

<TogglePopupButton
                    onClick = { this.toggleDropup }
                    tabIndex = '0'
                    onBlur = { this.closeDropup }
                />
                { this.state.isOpenedDropup &&
                <ul className = { dropupList }>
                    { this.props.listItems.map((item, i) => (
                        <li
                            key = { i }
                            onMouseDown = { item.eventHandler }
                        >
                            { item.itemName}
                        </li>
                    ))}
                </ul>
                }

import ReactDOM from 'react-dom' ;

class SomeComponent {

  constructor(props) {
    // First, add this to your constructor
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentWillMount() {
    document.addEventListener('mousedown', this.handleClickOutside, false); 
  }

  // Unbind event on unmount to prevent leaks
  componentWillUnmount() {
    window.removeEventListener('mousedown', this.handleClickOutside, false);
  }

  handleClickOutside(event) {
    if(!ReactDOM.findDOMNode(this).contains(event.path[0])){
       console.log("OUTSIDE");
    }
  }
}

Ich habe für alle Gelegenheiten eine Lösung gefunden.

Sie sollten eine Komponente höherer Ordnung verwenden, um die Komponente, die Sie auf Klicks außerhalb der Komponente warten möchten, zu verpacken.

Dieses Komponentenbeispiel enthält nur eine Requisite: "onClickedOutside", die eine Funktion empfängt.

ClickedOutside.js

import React, { Component } from "react";

export default class ClickedOutside extends Component {
  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

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

  handleClickOutside = event => {
    // IF exists the Ref of the wrapped component AND his dom children doesnt have the clicked component 
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      // A props callback for the ClikedClickedOutside
      this.props.onClickedOutside();
    }
  };

  render() {
    // In this piece of code I'm trying to get to the first not functional component
    // Because it wouldn't work if use a functional component (like <Fade/> from react-reveal)
    let firstNotFunctionalComponent = this.props.children;
    while (typeof firstNotFunctionalComponent.type === "function") {
      firstNotFunctionalComponent = firstNotFunctionalComponent.props.children;
    }

    // Here I'm cloning the element because I have to pass a new prop, the "reference" 
    const children = React.cloneElement(firstNotFunctionalComponent, {
      ref: node => {
        this.wrapperRef = node;
      },
      // Keeping all the old props with the new element
      ...firstNotFunctionalComponent.props
    });

    return <React.Fragment>{children}</React.Fragment>;
  }
}

UseOnClickOutside Hook - Reagiere 16.8 +

Erstellen Sie eine allgemeine useOnOutsideClick-Funktion

export const useOnOutsideClick = handleOutsideClick => {
  const innerBorderRef = useRef();

  const onClick = event => {
    if (
      innerBorderRef.current &&
      !innerBorderRef.current.contains(event.target)
    ) {
      handleOutsideClick();
    }
  };

  useMountEffect(() => {
    document.addEventListener("click", onClick, true);
    return () => {
      document.removeEventListener("click", onClick, true);
    };
  });

  return { innerBorderRef };
};

const useMountEffect = fun => useEffect(fun, []);

Verwenden Sie dann den Haken in einer beliebigen Funktionskomponente.

const OutsideClickDemo = ({ currentMode, changeContactAppMode }) => {

  const [open, setOpen] = useState(false);
  const { innerBorderRef } = useOnOutsideClick(() => setOpen(false));

  return (
    <div>
      <button onClick={() => setOpen(true)}>open</button>
      {open && (
        <div ref={innerBorderRef}>
           <SomeChild/>
        </div>
      )}
    </div>
  );

};

Link zur Demo

Teilweise inspiriert von @ pau1fitzgerald Antwort.