React中onClick与onMouseEnter区别及侧边栏切换问题排查

问题描述 #

我在主页面实现了一个固定在文档右侧的侧边切换菜单组件，基于React Hooks编写菜单切换逻辑，遇到了事件绑定异常的问题：

• 最初给触发按钮绑定onClick()事件时，点击按钮无法触发菜单切换
• 将事件替换为onMouseEnter()后，菜单切换功能可以正常运行
• 后续尝试给onClick传入箭头函数回调的写法（onClick={()=>{toggleMenu()}}），问题仍然存在

我确认切换函数本身没有逻辑错误——毕竟绑定onMouseEnter时功能完全正常，推测是两类事件的底层运行机制存在差异，但查阅JS官方文档没有找到对应解释，需要相关原理说明和问题修复演示。
问题涉及的实现代码如下：

import React, { useState } from "react";
import "../css/side-toggle.css";
import hbgBtn from "../image/hamburgerBtn.png";

const SideBar = ({ wid = 380, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen((isOpen) => !isOpen);
    console.log('1')
  };

  const closeMenu = () => {
    setIsOpen((isOpen) => !isOpen);
  }

  return (
    <div className="container" wid={wid}>
      <img onMouseEnter={(e) => toggleMenu(e)} 
        className={!isOpen ? "show-btn" : "hide"}
        src={hbgBtn}
        alt=""
      />
      <div onMouseEnter={closeMenu} className={isOpen? "dimmer" : 'hide'}>{children}</div>
      <div className={isOpen ? "side-column" : "hide"}></div>
    </div>
  );
};

export default SideBar;

注：我是非英语母语使用者，英语表述不够地道请见谅。

问题原因与修复方案 #

核心原因 #

和事件底层机制没有关系，是DOM层级搭配类名控制逻辑产生的事件拦截：

1. 用onMouseEnter触发菜单打开时，鼠标从页面其他区域移动到汉堡按钮上，此时遮罩层（dimmer）、侧边栏都带有hide类，常规hide类的样式都是display: none，元素不会渲染在页面上，自然不会拦截按钮的事件。
2. 换成onClick绑定后，点击瞬间isOpen变为true，遮罩层和侧边栏立刻移除hide类显示出来——常规侧边栏的遮罩层都是fixed定位铺满全屏，z-index高于页面按钮，会直接盖在汉堡按钮上层。此时鼠标位置刚好处于遮罩层范围内，会立刻触发遮罩层上绑定的onMouseEnter={closeMenu}，又把isOpen改回false。
3. 整个状态变更都在React的批量更新队列里完成，只触发一次重渲染，视觉上看起来就是点击完全没反应，甚至toggleMenu里写的console.log('1')还能正常打印，但菜单不会有任何显示。你之前试了各种onClick的回调写法都没用，本质是问题根本不出在onClick的绑定方式上，就算onClick正确触发了，后续遮罩层的enter事件也会立刻把状态改回去。
4. onMouseEnter能正常运行纯粹是巧合：鼠标移入按钮时还没有点击动作，遮罩层弹出的瞬间鼠标还停在按钮位置，没有进入遮罩层的触发范围，不会立刻触发关闭逻辑。

修复步骤 #

• 先修正closeMenu逻辑：这个函数的作用就是关闭菜单，不要和toggleMenu一样写状态取反，直接执行setIsOpen(false)，避免状态错乱。
• 移除遮罩层上错误的onMouseEnter绑定：常规侧边栏的遮罩层都是点击触发关闭，没有鼠标移入就关闭的交互，把遮罩层的触发事件改成onClick={closeMenu}。
• 把汉堡按钮上的onMouseEnter替换为onClick，直接传入函数引用即可，不需要额外包裹一层无意义的箭头函数。
• 移除容器div上非标准的wid属性：原生DOM不识别自定义属性，React也不会把这类属性正常渲染到真实DOM上，需要传递宽度参数可以用CSS变量或者内联样式实现。

修正后可正常运行的代码如下：

import React, { useState } from "react";
import "../css/side-toggle.css";
import hbgBtn from "../image/hamburgerBtn.png";

const SideBar = ({ wid = 380, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(prev => !prev);
  };

  const closeMenu = () => {
    setIsOpen(false);
  }

  return (
    <div className="container" style={{ '--side-bar-width': `${wid}px` }}>
      <img 
        onClick={toggleMenu} 
        className={!isOpen ? "show-btn" : "hide"}
        src={hbgBtn}
        alt="侧边栏切换按钮"
      />
      <div 
        onClick={closeMenu} 
        className={isOpen? "dimmer" : 'hide'}
      >
        {children}
      </div>
      <div className={isOpen ? "side-column" : "hide"}></div>
    </div>
  );
};

export default SideBar;

额外注意点 #

• 如果组件里类名切换的判断逻辑比较复杂，可以引入clsx库简化写法，减少手写三元判断产生的低级错误
• 所有可交互元素（比如作为按钮使用的img）建议补充清晰的alt属性或者ARIA标签，满足页面可访问性要求
• 绑定事件时如果不需要传递额外参数，直接传入函数名引用即可，不需要写onClick={(e) => toggleMenu(e)}这类冗余写法，React会自动把事件对象作为参数传入绑定的函数。

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