Je recherche un moyen de détecter si un événement de clic s'est produit en dehors d'un composant, comme décrit dans cet article . jQuery le plus proche () est utilisé pour voir si la cible d'un événement click a l'élément dom comme l'un de ses parents. S'il y a correspondance, l'événement click appartient à l'un des enfants et n'est donc pas considéré comme étant en dehors du composant.

Donc, dans mon composant, je veux attacher un gestionnaire de clics à la fenêtre. Lorsque le gestionnaire se déclenche, je dois comparer la cible avec les enfants dom de mon composant.

L'événement click contient des propriétés telles que "chemin" qui semble contenir le chemin dom que l'événement a parcouru. Je ne sais pas quoi comparer ou comment le traverser au mieux, et je pense que quelqu'un doit déjà avoir mis cela dans une fonction utilitaire intelligente ... Non?

L'utilisation des références dans React 16.3+ a changé.

La solution suivante utilise ES6 et suit les meilleures pratiques pour la liaison ainsi que la définition de la référence via une méthode.

Pour le voir en action:

• Implémentation de classe
• Mise en œuvre des crochets

Implémentation de classe:

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,
};

Mise en œuvre des crochets:

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>;
}

Voici la solution qui a fonctionné le mieux pour moi sans attacher d'événements au conteneur:

Certains éléments HTML peuvent avoir ce qui est appelé " focus ", par exemple des éléments d'entrée. Ces éléments répondront également au flou événement , lorsqu'ils perdront cette concentration.

Pour donner à n'importe quel élément la capacité d'avoir le focus, assurez-vous simplement que son attribut tabindex est défini sur autre chose que -1. En HTML standard, ce serait en définissant l' tabindexattribut, mais dans React, vous devez utiliser tabIndex(notez la majusculeI ).

Vous pouvez également le faire via JavaScript avec element.setAttribute('tabindex',0)

C'est pour cela que je l'utilisais, pour créer un menu DropDown personnalisé.

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>
        );
    }
});

J'étais coincé sur le même problème. Je suis un peu en retard à la fête ici, mais pour moi, c'est une très bonne solution. J'espère que cela sera utile à quelqu'un d'autre. Vous devez importer findDOMNodedereact-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
        });
    }
}

Approche React Hooks (16.8 +)

Vous pouvez créer un crochet réutilisable appelé 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 };
}

Ensuite, dans le composant, vous souhaitez ajouter la fonctionnalité pour effectuer les opérations suivantes:

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

}

Trouvez un exemple de code et de boîte ici.

Après avoir essayé de nombreuses méthodes ici, j'ai décidé d'utiliser github.com/Pomax/react-onclickoutside en raison de sa complétude.

J'ai installé le module via npm et l'ai importé dans mon composant:

import onClickOutside from 'react-onclickoutside'

Ensuite, dans ma classe de composants, j'ai défini la handleClickOutsideméthode:

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

Et lors de l'exportation de mon composant, je l'ai enveloppé dans onClickOutside():

export default onClickOutside(NameOfComponent)

C'est ça.

J'ai trouvé une solution grâce à Ben Alpert sur discuter.reactjs.org . L'approche suggérée associe un gestionnaire au document, mais cela s'est avéré problématique. En cliquant sur l'un des composants de mon arborescence, un nouveau rendu a supprimé l'élément cliqué lors de la mise à jour. Étant donné que le rendu de React se produit avant l'appel du gestionnaire de corps de document, l'élément n'a pas été détecté comme «à l'intérieur» de l'arborescence.

La solution était d'ajouter le gestionnaire sur l'élément racine de l'application.

principale:

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

composant:

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>
    )
  }
}

Mise en œuvre du crochet basée sur l'excellent discours de Tanner Linsley au JSConf Hawaii 2020 :

useOuterClick API de crochet

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

la mise en oeuvre

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

useOuterClickutilise des références mutables pour créer une API allégée pour le Client. Un rappel peut être défini sans avoir à le mémoriser via useCallback. Le corps de rappel a toujours accès aux accessoires et à l'état les plus récents (pas de valeurs de fermeture périmées).

Remarque pour les utilisateurs iOS

iOS ne traite que certains éléments comme cliquables. Pour contourner ce comportement, choisissez un écouteur de clic externe différent de document- rien vers le haut, y compris body. Par exemple, vous pouvez ajouter un écouteur sur la racine React divdans l'exemple ci-dessus et augmenter sa hauteur ( height: 100vhou similaire) pour intercepter tous les clics extérieurs. Sources: quirksmode.org et cette réponse

Aucune des autres réponses ici n'a fonctionné pour moi. J'essayais de cacher une fenêtre contextuelle sur le flou, mais comme le contenu était absolument positionné, onBlur tirait même au clic du contenu intérieur.

Voici une approche qui a fonctionné pour moi:

// 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.
    }
},

J'espère que cela t'aides.

[Mise à jour] Solution avec React ^ 16.8 utilisant des crochets

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;

Solution avec React ^ 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;

Voici mon approche (démo - https://jsfiddle.net/agymay93/4/ ):

J'ai créé un composant spécial appelé WatchClickOutsideet il peut être utilisé comme (je suppose que la JSXsyntaxe):

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

Voici le code du WatchClickOutsidecomposant:

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>
    );
  }
}

Cela a déjà de nombreuses réponses, mais elles ne répondent pas e.stopPropagation()et empêchent de cliquer sur les liens de réaction en dehors de l'élément que vous souhaitez fermer.

Étant donné que React possède son propre gestionnaire d'événements artificiels, vous ne pouvez pas utiliser le document comme base pour les écouteurs d'événements. Vous devez le faire e.stopPropagation()avant car React utilise le document lui-même. Si vous utilisez par exemple à la document.querySelector('body')place. Vous pouvez empêcher le clic du lien React. Voici un exemple de la façon dont j'implémente le clic à l'extérieur et la fermeture.
Il utilise ES6 et 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;

Pour ceux qui ont besoin d'un positionnement absolu, une option simple que j'ai choisie consiste à ajouter un composant wrapper conçu pour couvrir toute la page avec un arrière-plan transparent. Ensuite, vous pouvez ajouter un onClick sur cet élément pour fermer votre composant interne.

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

Comme c'est le cas actuellement si vous ajoutez un gestionnaire de clics sur le contenu, l'événement sera également propagé à la division supérieure et déclenchera donc le gestionnaireOutsideClick. Si ce n'est pas le comportement souhaité, arrêtez simplement la progression de l'événement sur votre gestionnaire.

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

"

Pour prolonger la réponse acceptée de Ben Bud , si vous utilisez des composants de style, transmettre des références de cette façon vous donnera une erreur telle que "this.wrapperRef.contains n'est pas une fonction".

La correction suggérée, dans les commentaires, pour envelopper le composant stylisé avec un div et y passer la référence, fonctionne. Cela dit, dans leurs documents, ils expliquent déjà la raison de cela et la bonne utilisation des références dans les composants de style:

Passer un accessoire ref à un composant stylé vous donnera une instance de l'encapsuleur StyledComponent, mais pas au nœud DOM sous-jacent. Cela est dû au fonctionnement des refs. Il n'est pas possible d'appeler directement des méthodes DOM, comme focus, sur nos wrappers. Pour obtenir une référence au nœud DOM enveloppé réel, passez plutôt le rappel à la propriété innerRef.

Ainsi:

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

Ensuite, vous pouvez y accéder directement dans la fonction "handleClickOutside":

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

Cela vaut également pour l'approche "onBlur":

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

Material-UI a un petit composant pour résoudre ce problème: https://material-ui.com/components/click-away-listener/ que vous pouvez choisir. Il pèse 1,5 ko gzippé, il prend en charge les mobiles, IE 11 et les portails.

Ma plus grande préoccupation avec toutes les autres réponses est de devoir filtrer les événements de clic de la racine / du parent vers le bas. J'ai trouvé que le moyen le plus simple était de simplement définir un élément frère avec position: fixed, un z-index 1 derrière la liste déroulante et de gérer l'événement click sur l'élément fixe à l'intérieur du même composant. Garde tout centralisé dans un composant donné.

Exemple de code

#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})
  }
}

L'événement path[0]est le dernier élément cliqué

J'ai utilisé ce module (je n'ai aucun lien avec l'auteur)

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>
    );
  }
}

Cela a bien fonctionné.

Je l'ai fait en partie en suivant cela et en suivant les documents officiels de React sur la gestion des références, ce qui nécessite de réagir ^ 16.3. C'est la seule chose qui a fonctionné pour moi après avoir essayé certaines des autres suggestions ici ...

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***
)}}

Un exemple avec la stratégie

J'aime les solutions fournies qui permettent de faire la même chose en créant un wrapper autour du composant.

Puisqu'il s'agit plus d'un comportement, j'ai pensé à la stratégie et j'ai proposé ce qui suit.

Je suis nouveau avec React et j'ai besoin d'un peu d'aide pour économiser du passe-partout dans les cas d'utilisation

Vérifiez et dites moi ce que vous en pensez s'il vous plait.

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)
    }
  }
}

Exemple d'utilisation

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() {...}
}

Remarques

J'ai pensé à stocker les componentcrochets de cycle de vie passés et à les remplacer par des méthodes similaires à ceci:

const baseDidMount = component.componentDidMount;

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

componentest le composant passé au constructeur de ClickOutsideBehavior.
Cela supprimera l'activation / désactivation du passe-partout de l'utilisateur de ce comportement, mais cela n'a pas l'air très agréable

Dans mon cas DROPDOWN, la solution de Ben Bud fonctionnait bien, mais j'avais un bouton bascule séparé avec un gestionnaire onClick. Ainsi, la logique de clic extérieur était en conflit avec le bouton du bouton bascule. Voici comment je l'ai résolu en passant également la référence du bouton:

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>
  );
}

Si vous souhaitez utiliser un petit composant (466 octets compressé) qui existe déjà pour cette fonctionnalité, vous pouvez consulter cette bibliothèque react-outclick .

La bonne chose à propos de la bibliothèque est qu'elle vous permet également de détecter les clics à l'extérieur d'un composant et à l'intérieur d'un autre. Il prend également en charge la détection d'autres types d'événements.

Si vous souhaitez utiliser un petit composant (466 octets compressé) qui existe déjà pour cette fonctionnalité, vous pouvez consulter cette bibliothèque react-outclick . Il capture les événements en dehors d'un composant React ou d'un élément jsx.

La bonne chose à propos de la bibliothèque est qu'elle vous permet également de détecter les clics à l'extérieur d'un composant et à l'intérieur d'un autre. Il prend également en charge la détection d'autres types d'événements.

Je sais que c'est une vieille question, mais je continue de la rencontrer et j'ai eu beaucoup de mal à la comprendre dans un format simple. Donc, si cela faciliterait la vie de quiconque, utilisez OutsideClickHandler par airbnb. C'est le plugin le plus simple pour accomplir cette tâche sans écrire votre propre code.

Exemple:

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'));

vous pouvez vous un moyen simple de résoudre votre problème, je vous montre:

....

const [dropDwonStatus , setDropDownStatus] = useState(false)

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

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

cela fonctionne pour moi, bonne chance;)

J'ai trouvé cela dans l'article ci-dessous:

render () {return ({this.node = node;}}> Toggle Popover {this.state.popupVisible && (Je suis un popover!)}); }}

Voici un excellent article sur ce problème: "Gérer les clics en dehors des composants React" https://larsgraubner.com/handle-outside-clicks-react/

Ajoutez un onClickgestionnaire à votre conteneur de niveau supérieur et incrémentez une valeur d'état chaque fois que l'utilisateur clique dessus. Transmettez cette valeur au composant approprié et chaque fois que la valeur change, vous pouvez travailler.

Dans ce cas, nous appelons this.closeDropdown()chaque fois que la clickCountvaleur change.

La incrementClickCountméthode se déclenche dans le .appconteneur, mais pas .dropdownparce que nous l'utilisons event.stopPropagation()pour empêcher la propagation d'événements.

Votre code peut finir par ressembler à ceci:

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>
        );
    }
}

Pour que la solution «focus» fonctionne pour la liste déroulante avec les écouteurs d'événements, vous pouvez les ajouter avec l' événement onMouseDown au lieu de onClick . De cette façon, l'événement se déclenchera et après cela, le popup se fermera comme suit:

<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");
    }
  }
}

J'ai fait une solution pour toutes les occasions.

Vous devez utiliser un composant d'ordre élevé pour envelopper le composant que vous souhaitez écouter pour les clics en dehors de celui-ci.

Cet exemple de composant n'a qu'un seul accessoire: "onClickedOutside" qui reçoit une fonction.

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>;
  }
}

Crochet UseOnClickOutside - React 16.8 +

Créer une fonction useOnOutsideClick générale

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, []);

Utilisez ensuite le crochet dans n'importe quel composant fonctionnel.

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>
  );

};

Lien vers la démo

Partiellement inspiré par la réponse @ pau1fitzgerald.