如何在 React 中检测元素外部点击

检测元素外部的点击是 React 中最常见的 UI 交互模式之一。当用户点击页面其他位置时，关闭模态框、下拉菜单、弹出菜单和工具提示等组件，这一功能不可或缺。

问题所在

在构建下拉菜单或模态框等交互式组件时，你需要在用户点击外部区域时将其关闭。手动实现这一功能需要：

添加 document 级别的点击事件监听器
判断点击目标是在元素内部还是外部
在组件卸载时清理监听器
处理各种边界情况（Portal、嵌套元素等）

手动实现方式

大多数开发者从零开始实现的方式如下：

import { useEffect, useRef } from "react";

function Dropdown() {
  const ref = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    function handleClick(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  return <div ref={ref}>{/* dropdown content */}</div>;
}

这种方式可以工作，但你需要在每个地方重复这段代码。而且它遗漏了触摸事件、iframe 点击和 Shadow DOM 等边界情况。

更好的方式：useClickOutside

ReactUse 提供的 useClickOutside 为你处理了所有这些问题：

import { useClickOutside } from "@reactuses/core";
import { useRef, useState } from "react";

function Dropdown() {
  const ref = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  useClickOutside(ref, () => {
    setIsOpen(false);
  });

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Menu</button>
      {isOpen && (
        <div ref={ref}>
          <p>Click outside to close</p>
        </div>
      )}
    </div>
  );
}

常见使用场景

模态对话框 — 点击背景遮罩时关闭
下拉菜单 — 点击菜单外部时关闭
工具提示/弹出框 — 点击外部时消失
搜索自动补全 — 关闭建议面板
右键菜单 — 关闭自定义右键菜单

在线体验

查看我们文档站点上的交互式演示，你可以实时编辑代码并查看效果。

安装

npm i @reactuses/core