React实现下拉菜单在鼠标移出菜单及子菜单区域时自动关闭的技术咨询

我来帮你搞定这个下拉菜单的问题！你现在遇到的核心问题是：当前的鼠标事件逻辑只监听了主菜单元素，当鼠标移到子菜单时，会被判定为“移出主菜单”从而触发关闭，但实际上子菜单属于整个下拉组件的一部分，应该把整个菜单区域（主按钮+子菜单）作为一个整体来判断鼠标是否离开。

问题根源 #

你之前用的onMouseOver会在鼠标进入子元素时反复触发，而且没有监听鼠标离开整个菜单容器的事件，导致还没操作子菜单就提前关闭了。我们可以通过调整鼠标事件和优化状态逻辑来解决。

修改后的完整代码 #

import React from 'react'
import styles from './Dropdown.module.css'

const Dropdown = ({children, className, style, value }) => {
  const [active, setActive] = React.useState(false)
  const anchorRef = React.useRef()

  React.useEffect(() => {
    anchorRef.current.removeAttribute('href')
  },[])

  // 过滤空类名，避免无效的空格
  const stylesDropdown = [styles.li, className].filter(Boolean).join(' ')

  return (
    <li 
      className={stylesDropdown} 
      style={style}
      // 鼠标进入整个菜单容器时展开
      onMouseEnter={() => setActive(true)}
      // 鼠标完全离开整个菜单容器（包括子菜单）时关闭
      onMouseLeave={() => setActive(false)}
    >
      <a href='/' className={styles.a} ref={anchorRef}>{value}</a>
      <span className={styles.span}>
        <i className={`fa-solid fa-sort-down ${active ? styles.active : ''}`}></i>
      </span>
      <ul className={styles.ul}>
        {active && children}
      </ul>
    </li>
  )
}

export default Dropdown

关键修改点说明 #

1. 替换鼠标事件：

   • 用onMouseEnter替代onMouseOver：onMouseEnter不会冒泡到子元素，只有当鼠标真正进入外层<li>时才触发展开，避免了反复触发的问题。
   • 添加onMouseLeave到外层<li>：只有当鼠标完全离开整个菜单容器（包括里面的子菜单<ul>）时，才会关闭菜单，这样操作子菜单时就不会误触发关闭了。

2. 简化状态逻辑：

   • 去掉了多余的i状态和对应的useEffect，直接在渲染时通过active状态判断是否添加styles.active类，减少了不必要的状态更新。

3. 优化类名拼接：

   • 用filter(Boolean)过滤空的className，避免生成带无效空格的类名，让样式更稳定。

额外注意事项 #

确保你的CSS中子菜单<ul>是外层<li>的子元素，且没有脱离父元素的布局范围（比如如果用position: absolute，记得给父<li>加position: relative），这样鼠标事件才能正确识别是否在菜单区域内。

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