如何实现Antd子菜单鼠标移出不关闭，Hover时切换子菜单

问题描述 #

我用Ant Design实现了一个带多级子菜单的下拉菜单，当前遇到以下问题：

• 鼠标意外移出子菜单时，子菜单很容易关闭，交互体验不佳
• triggerSubMenuOpenAction属性同时控制子菜单的打开和关闭逻辑，无法单独设置为hover打开、click关闭的模式
• 尝试手动通过openKeys控制时，onOpenChange会多次触发并传入不同数组，无法判断鼠标是移出菜单区域还是切换到了其他菜单项（例如从子菜单3-2-2-1移出时，日志会打印三次）

相关代码示例：

import { useState } from 'react';
import { Dropdown, Menu } from 'antd';

// 示例多级菜单配置
const items = [
  {
    key: '1',
    label: '菜单1',
    children: [{ key: '1-1', label: '子菜单1-1' }, { key: '1-2', label: '子菜单1-2' }],
  },
  {
    key: '2',
    label: '菜单2',
    children: [{ key: '2-1', label: '子菜单2-1' }, { key: '2-2', label: '子菜单2-2', children: [{ key: '2-2-1', label: '子菜单2-2-1' }] }],
  },
  {
    key: '3',
    label: '菜单3',
    children: [{ key: '3-1', label: '子菜单3-1' }, { key: '3-2', label: '子菜单3-2', children: [{ key: '3-2-1', label: '子菜单3-2-1', children: [{ key: '3-2-1-1', label: '子菜单3-2-1-1' }] }] }],
  },
];

export default function App() {
  const [openDropdown, setOpenDropdown] = useState(false);
  const [openKeys, setOpenKeys] = useState<string[]>([]);

  const handleDropdownOpenChange = (nextOpen, info) => {
    console.log("onDropdownOpenChange", nextOpen, info);
    if (info.source === "trigger") {
      setOpenDropdown(nextOpen);
    }
  };

  const handleSubmenuOpenChange = (openKeys) => {
    console.log("openKeys", openKeys);
    setOpenKeys([...openKeys]);
  };

  return (
    <Dropdown
      menu={{ items, openKeys, onOpenChange: handleSubmenuOpenChange }}
      trigger={["click"]}
      open={openDropdown}
      onOpenChange={handleDropdownOpenChange}
    >
      <button>Click to open menu</button>
    </Dropdown>
  );
}

解决方案 #

要实现「鼠标移出当前子菜单保持打开，hover打开新子菜单并自动关闭旧子菜单」的桌面软件式逻辑，可以通过自定义openKeys结合定时器延迟关闭实现，核心思路是：

• 给所有子菜单项添加鼠标进入/离开事件，区分「切换子菜单」和「完全移出菜单」两种场景
• 用定时器设置关闭延迟，给用户预留鼠标移动的缓冲时间
• 完全接管子菜单的打开/关闭逻辑，避免Ant Design内置的hover关闭逻辑干扰

具体实现代码 #

import { useState, useRef } from 'react';
import { Dropdown, Menu } from 'antd';

const items = [
  {
    key: '1',
    label: '菜单1',
    children: [{ key: '1-1', label: '子菜单1-1' }, { key: '1-2', label: '子菜单1-2' }],
  },
  {
    key: '2',
    label: '菜单2',
    children: [{ key: '2-1', label: '子菜单2-1' }, { key: '2-2', label: '子菜单2-2', children: [{ key: '2-2-1', label: '子菜单2-2-1' }] }],
  },
  {
    key: '3',
    label: '菜单3',
    children: [{ key: '3-1', label: '子菜单3-1' }, { key: '3-2', label: '子菜单3-2', children: [{ key: '3-2-1', label: '子菜单3-2-1', children: [{ key: '3-2-1-1', label: '子菜单3-2-1-1' }] }] }],
  },
];

export default function App() {
  const [openDropdown, setOpenDropdown] = useState(false);
  const [openKeys, setOpenKeys] = useState<string[]>([]);
  const closeTimerRef = useRef(null);

  // 主菜单点击打开/关闭逻辑
  const handleDropdownOpenChange = (nextOpen, info) => {
    if (info.source === "trigger") {
      setOpenDropdown(nextOpen);
      // 关闭主菜单时清空子菜单并清除定时器
      if (!nextOpen) {
        setOpenKeys([]);
        closeTimerRef.current && clearTimeout(closeTimerRef.current);
      }
    }
  };

  // 子菜单鼠标进入：清除关闭定时器，打开当前层级子菜单并关闭其他分支
  const handleSubmenuMouseEnter = (key) => {
    closeTimerRef.current && clearTimeout(closeTimerRef.current);
    // 解析当前key的父层级，确保只保留当前分支的打开状态
    const parentKeys = key.split('-').slice(0, -1).map((_, idx, arr) => arr.slice(0, idx+1).join('-'));
    setOpenKeys([...parentKeys, key]);
  };

  // 子菜单鼠标离开：设置延迟关闭定时器
  const handleSubmenuMouseLeave = () => {
    closeTimerRef.current = setTimeout(() => {
      // 保留父菜单打开，仅关闭最深层级的子菜单；若要全部关闭可改为setOpenKeys([])
      setOpenKeys(prev => prev.slice(0, prev.length - 1));
    }, 300); // 300ms延迟，给用户足够的鼠标移动缓冲
  };

  // 给所有子菜单项绑定鼠标事件
  const wrapMenuItems = (menuItem) => ({
    ...menuItem,
    onMouseEnter: () => handleSubmenuMouseEnter(menuItem.key),
    onMouseLeave: handleSubmenuMouseLeave,
    ...(menuItem.children && { children: menuItem.children.map(wrapMenuItems) })
  });
  const customItems = items.map(wrapMenuItems);

  return (
    <Dropdown
      menu={{ 
        items: customItems, 
        openKeys,
        // 禁用默认onOpenChange，完全用自定义逻辑控制
        onOpenChange: () => {}
      }}
      trigger={["click"]}
      open={openDropdown}
      onOpenChange={handleDropdownOpenChange}
    >
      <button>Click to open menu</button>
    </Dropdown>
  );
}

关键说明 #

• 定时器延迟：300ms的延迟避免了鼠标轻微移出就关闭子菜单的问题，同时不影响正常的交互体验
• 层级管理：通过拆分菜单项key的层级，确保切换子菜单时自动关闭其他分支的菜单，保持逻辑和桌面软件一致
• 完全自定义控制：禁用默认的onOpenChange，避免Ant Design内置的hover关闭逻辑和自定义逻辑冲突

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