React.js中点击图层外部区域隐藏图层的实现方法

没问题！要实现点击图层外部就隐藏对应的图层，我们可以通过React的全局事件监听结合DOM元素判断来搞定，我帮你修改代码并解释关键点：

核心思路 #

我们需要给document添加一个全局点击事件监听，每次点击时判断点击的目标是不是在图层内部或者切换按钮上——如果都不是，就触发隐藏图层的逻辑。

修改后的完整代码 #

import { useState, useRef, useEffect } from 'react';
import { NavLink } from 'react-router-dom';

const Navi = () => {
  const [show, setShow] = useState(false);
  const [show2, setShow2] = useState(false);
  
  // 创建ref来获取按钮和图层的DOM元素
  const toggle1BtnRef = useRef(null);
  const toggle2BtnRef = useRef(null);
  const layer1Ref = useRef(null);
  const layer2Ref = useRef(null);

  const onToggleClick = () => {
    setShow(!show);
    setShow2(false);
  };

  const onToggleClick2 = () => {
    setShow(false);
    setShow2(!show2);
  };

  const resetToggle = () => {
    setShow(false);
    setShow2(false);
  };

  // 全局点击事件处理逻辑
  useEffect(() => {
    const handleClickOutside = (e) => {
      // 如果两个图层都已经隐藏，直接跳过处理
      if (!show && !show2) return;

      // 判断点击目标是否在toggle1按钮或layer1内部
      const isToggle1Clicked = toggle1BtnRef.current?.contains(e.target);
      const isLayer1Clicked = layer1Ref.current?.contains(e.target);
      // 判断点击目标是否在toggle2按钮或layer2内部
      const isToggle2Clicked = toggle2BtnRef.current?.contains(e.target);
      const isLayer2Clicked = layer2Ref.current?.contains(e.target);

      // 点击不在任何按钮或图层内时，隐藏所有图层
      if (!isToggle1Clicked && !isLayer1Clicked && !isToggle2Clicked && !isLayer2Clicked) {
        resetToggle();
      }
    };

    // 给document添加点击监听
    document.addEventListener('click', handleClickOutside);
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, [show, show2]); // 依赖图层显示状态，确保状态变化时监听逻辑同步更新

  return (
    <div className="wrap-navi">
      <div className="navi">
        <NavLink to="/menu" onClick={resetToggle}>
          menu
        </NavLink>
        <button 
          ref={toggle1BtnRef}
          onClick={onToggleClick} 
          className={show ? "active" : ""}
        >
          toggle1
        </button>
        <button 
          ref={toggle2BtnRef}
          onClick={onToggleClick2} 
          className={show2 ? "active" : ""}
        >
          toggle2
        </button>
      </div>
      <nav 
        ref={layer1Ref}
        className={`layer1 ${show ? "active" : ""}`}
        style={{ width: '300px', height: '300px', position: 'absolute', top: '50px', background: '#f0f0f0' }}
      >
        toggle1 Layer
      </nav>
      <nav 
        ref={layer2Ref}
        className={`layer2 ${show2 ? "active" : ""}`}
        style={{ width: '300px', height: '300px', position: 'absolute', top: '50px', background: '#f0f0f0' }}
      >
        toggle2 Layer
      </nav>
    </div>
  );
};

export default Navi;

关键细节说明 #

• useRef的作用：用来获取按钮和图层的DOM节点，这样我们可以用contains()方法判断点击的目标是否在这些元素内部。
• useEffect的依赖：把show和show2作为依赖项，确保当图层显示状态变化时，事件监听的逻辑能同步更新。
• 事件清理：在useEffect的返回函数中移除事件监听，避免组件卸载后残留事件导致内存泄漏。

配套CSS样式（可选） #

如果你的图层默认是隐藏的，可以添加以下CSS来控制显示/隐藏：

.layer1, .layer2 {
  display: none;
  /* 可以根据需求调整定位和样式 */
  position: absolute;
  border: 1px solid #ccc;
  padding: 10px;
}

.layer1.active, .layer2.active {
  display: block;
}

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