React汉堡菜单点击外部关闭与图标切换状态冲突问题

问题根源 #

点击汉堡图标时，由于图标不在菜单容器范围内，mousedown事件会先触发图标的状态切换逻辑，随后事件冒泡到document，触发你写的外部点击关闭逻辑。两次状态修改相互抵消，导致菜单无法正常关闭。

解决方案 #

方案1：在外部点击判断中排除汉堡图标 #

给汉堡图标添加一个ref标识，在外部点击检测逻辑里跳过对汉堡图标的判断，避免触发关闭逻辑。

修改步骤：

1. 给汉堡图标添加ref：

const hamburgerRef = useRef(null);

2. 绑定ref到汉堡按钮组件：

<HamburgerButton
  ref={hamburgerRef}
  open={asideMenu.deployMode}
  width={28.88}
  height={25.27 / 1.5}
  strokeWidth={3}
  color={asideMenu.deployMode ? "var(--black)" : "var(--pink)"}
  animationDuration={0.5}
  onClick={onClick}
/>

3. 调整外部点击检测的自定义hook，新增排除汉堡图标的逻辑：

const useOutsideAlerter = (ref, excludeRef) => {
  useEffect(() => {
    const handleClickOutside = event => {
      // 排除菜单内部和汉堡图标，才执行关闭逻辑
      if (ref.current && !ref.current.contains(event.target) && !excludeRef.current?.contains(event.target) && window.innerWidth < 900) {
        setDeployMode(false);
        dispatch(deployModeAsideMenu({ deployMode: false }));
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref, excludeRef]);
};

// 使用时传入汉堡图标ref
const wrapperRef = useRef(null);
useOutsideAlerter(wrapperRef, hamburgerRef);

方案2：阻止汉堡图标点击事件冒泡 #

在汉堡图标的点击函数中阻止事件冒泡，让mousedown事件无法传递到document层，避免触发外部关闭逻辑。

修改汉堡图标点击函数：

const onClick = (e) => {
  e.stopPropagation();
  setDeployMode(!deployMode);
  dispatch(deployModeAsideMenu({ deployMode: !deployMode }));
};

注意：这种方式可能会影响页面上其他监听document点击的逻辑，需根据实际场景选择。

方案3：调整事件监听阶段 #

把外部点击的监听事件从mousedown改为mouseup，利用事件触发顺序（onClick在mouseup阶段执行），确保状态切换先完成，再判断是否需要关闭菜单。

修改自定义hook中的事件绑定：

document.addEventListener("mouseup", handleClickOutside);
return () => {
  document.removeEventListener("mouseup", handleClickOutside);
};

完整代码示例（推荐方案1） #

const [deployMode, setDeployMode] = useState(false);
const hamburgerRef = useRef(null);

const changeDeployMode = () => {
  setDeployMode(!deployMode);
  dispatch(deployModeAsideMenu({ deployMode: !deployMode }));
};

useEffect(() => {
  setDeployMode(asideMenu.deployMode);
  setLandscapeMode(asideMenu.landscapeMode);
}, [asideMenu]);

const useOutsideAlerter = (ref, excludeRef) => {
  useEffect(() => {
    const handleClickOutside = event => {
      if (ref.current && !ref.current.contains(event.target) && !excludeRef.current?.contains(event.target) && window.innerWidth < 900) {
        setDeployMode(false);
        dispatch(deployModeAsideMenu({ deployMode: false }));
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref, excludeRef]);
};

const wrapperRef = useRef(null);
useOutsideAlerter(wrapperRef, hamburgerRef);

// 汉堡图标组件
<HamburgerButton
  ref={hamburgerRef}
  open={asideMenu.deployMode}
  width={28.88}
  height={25.27 / 1.5}
  strokeWidth={3}
  color={asideMenu.deployMode ? "var(--black)" : "var(--pink)"}
  animationDuration={0.5}
  onClick={onClick}
/>

// 侧边菜单容器
<AsideMenuContainer ref={wrapperRef}>
  {/* 菜单内容 */}
</AsideMenuContainer>

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