React中无第三方库实现点击组件外部关闭下拉框

这问题我熟！不用第三方库的话，咱们可以借助React的useRef钩子和原生DOM事件监听来搞定，核心思路就是监听全局点击事件，判断点击区域是否在下拉框内部，不在的话就关闭下拉。下面是具体的实现步骤和修改后的代码：

步骤说明 #

• 添加Ref标记下拉容器：给下拉框的外层容器加一个ref，这样我们能精准判断点击的元素是否属于下拉框内部。
• 全局点击事件监听：在组件挂载时给document添加点击事件监听，卸载时移除（避免内存泄漏）。
• 判断点击区域并关闭下拉：在全局点击事件中，检查点击目标是否不在下拉容器内，同时当前下拉框是展开状态的话，就把showingProjectSelector设为false。
• 阻止图标点击事件冒泡：因为图标点击会触发toggle操作，事件冒泡到document会导致刚打开又关闭，所以要在图标的点击事件里阻止冒泡。

修改后的完整代码 #

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

const App = () => {
  const [showingProjectSelector, setShowingProjectSelector] = useState(false);
  // 给下拉容器添加ref
  const projectSelectorRef = useRef(null);

  // 监听全局点击事件
  useEffect(() => {
    const handleClickOutside = (event) => {
      // 如果下拉框是展开状态，且点击的元素不在下拉容器内
      if (showingProjectSelector && projectSelectorRef.current && !projectSelectorRef.current.contains(event.target)) {
        setShowingProjectSelector(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    // 组件卸载时移除监听
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [showingProjectSelector]); // 依赖showingProjectSelector，状态变化时重新绑定

  const toggleProjectSelector = (e) => {
    // 阻止事件冒泡，避免触发document的点击事件
    e.stopPropagation();
    setShowingProjectSelector(!showingProjectSelector);
  };

  return (
    <div className="container">
      <div className="project-selector-wrapper">
        <button onClick={toggleProjectSelector} className="folder-icon-btn">
          📁
        </button>
        {/* 给下拉容器加上ref */}
        {showingProjectSelector && (
          <div ref={projectSelectorRef} className="project-selector-dropdown">
            <div className="project-item">Project 1</div>
            <div className="project-item">Project 2</div>
            <div className="project-item">Project 3</div>
          </div>
        )}
      </div>
    </div>
  );
};

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

补充说明 #

• 用mousedown而非click事件，是因为它能更早捕获点击行为，避免一些边缘场景下的事件顺序问题，当然click也能实现基础功能，mousedown会更可靠。
• 组件卸载时必须移除事件监听，否则会造成内存泄漏，在单页应用中这一点尤为重要。
• 阻止图标点击事件的冒泡是关键细节，不然点击图标展开下拉后，事件会冒泡到document触发关闭操作，导致下拉框闪一下就消失。

内容的提问来源于stack exchange，提问作者Lizz Parody