这已经有很多答案了，但它们没有解决e.stopPropagation（）和阻止单击要关闭的元素之外的react链接的问题。

由于React有自己的人工事件处理程序，您无法将文档用作事件侦听器的基础。在这之前，您需要e.stopPropagation（），因为React使用文档本身。如果改用document.querySelector（'body'）。您可以防止点击React链接。下面是我如何实现单击外部并关闭的示例。这使用ES6和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;

基于Tanner Linsley在2020年夏威夷联合会议上的精彩演讲：

使用OuterClick API

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

实施

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

下面是一个工作示例：

/*自定义挂钩*/函数useOuterClick（回调）{const innerRef=useRef（）；const callbackRef=useRef（）；//在ref中设置当前回调，然后第二个useEffect使用它useEffect（（）=>{//useEffect包装器对于并发模式是安全的callbackRef.current=回调；});使用效果（（）=>{document.addEventListener（“单击”，handleClick）；return（）=>document.removeEventListener（“单击”，handleClick）；//从ref中读取最近的回调和innerRefdom节点函数句柄Click（e）{如果(内部参考当前&&回调参考当前&&!innerRef.current.contains（e.target）) {callbackRef.current（e）；}}}, []); // 无需回调+innerRef-depreturn innerRef；//返回参考；客户端可以省略`useRef`}/*用法*/常量客户端=（）=>{const[counter，setCounter]=useState（0）；const innerRef=useOuterClick（e=>{//调用处理程序时，计数器状态是最新的alert（`Clicked outside！Increment counter to${counter+1｝`）；设置计数器（c=>c+1）；});返回(＜div＞<p>点击外面</p＞<div id=“container”ref={innerRef}>内部，计数器：｛counter｝</div></div>);};ReactDOM.render（<Client/>，document.getElementById（“root”））；#容器｛边框：1px纯红色；填充：20px；｝<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js“integrity=”sha256-Ef0vObdWpkMAnxp39TYSLVS/vVUokDE8CDFnx7tjY6U=“crossrorigin=”匿名“></script><script src=“https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js“integrity=”sha256-p2yuFdE8hNZsQ31Qk+s8N+Me2fL5cc6NKXOC0U9uGw=“crossrorigin=”匿名“></script><script>var｛useRef，useEffect，useCallback，useState｝=反应</script><div id=“root”></div>

要点

useOuterClick利用可变引用提供瘦客户端API包含组件（[]deps）的生命周期的稳定单击侦听器客户端可以设置回调，而无需使用callback将其记忆回调主体可以访问最新的属性和状态-没有过时的闭包值

（iOS的侧注）

iOS通常只将某些元素视为可点击的。要使外部单击有效，请选择一个不同于文档的单击侦听器-不向上包括正文。例如，在React根div上添加一个监听器，并扩展其高度，如height:100vh，以捕捉所有外部点击。来源：quicksmod.org

在这里尝试了许多方法之后，我决定使用github.com/Pomax/react-onclickoutside，因为它非常完整。

我通过npm安装了模块并将其导入到组件中：

import onClickOutside from 'react-onclickoutside'

然后，在组件类中，我定义了handleClickOutside方法：

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

导出组件时，我将其包装在onClickOutside（）中：

export default onClickOutside(NameOfComponent)

就是这样。

我使用了这个模块（我与作者没有关联）

npm install react-onclickout --save

const ClickOutHandler=require（'act-on-clickout'）；ExampleComponent类扩展React.Component{单击退出（e）{if（hasClass（e.target，'忽略我'））返回；alert（'用户在组件外部单击！'）；}render（）{返回(<ClickOutHandler onClickOut=｛this.onClickOut｝><div>点击我的外部</分区></ClickOutHandler>);}}

它做得很好。

战略示例

我喜欢所提供的解决方案，这些解决方案通过围绕组件创建包装器来完成相同的任务。

由于这更多是一种行为，我想到了战略，并提出了以下建议。

我是React的新手，我需要一些帮助来保存用例中的样板

请回顾并告诉我你的想法。

ClickOutside行为

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

示例用法

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

笔记

我想到了存储传递的组件生命周期挂钩，并用类似的方法覆盖它们：

const baseDidMount = component.componentDidMount;

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

component是传递给ClickOutsideBehavior构造函数的组件。这将从该行为的用户中删除启用/禁用样板，但看起来不太好

Ez的方式。。。（2022年更新）

创建挂钩：useOutsideClick.ts

export function useOutsideClick(ref: any, onClickOut: () => void){
    useEffect(() => {
        const onClick = ({target}: any) => !ref.contains(target) && onClickOut?.()
        document.addEventListener("click", onClick);
        return () => document.removeEventListener("click", onClick);
    }, []);
}

将componentRef添加到组件并调用useOutsideClick

export function Example(){

  const componentRef = useRef();

  useOutsideClick(componentRef.current!, () => {
   // do something here
  });

  return ( 
    <div ref={componentRef as any}> My Component </div>
  )
}