如何让Radix-UI React Menubar在鼠标悬停时打开？

要让非受控的Radix-UI Menubar改成鼠标悬停触发，核心是把组件转为受控模式，用React状态管理菜单的打开/关闭，再给触发区域绑定鼠标事件。具体步骤如下：

1. 添加状态管理 #

首先引入React的useState钩子，用来控制菜单的打开状态：

import { useState } from 'react';
import * as Menubar from "@radix-ui/react-menubar";

2. 改造组件结构与事件绑定 #

修改原代码，将Menubar转为受控模式，给触发容器和菜单内容添加鼠标事件：

const [isOpen, setIsOpen] = useState(false);

<Menubar.Root
  open={isOpen}
  onOpenChange={(newOpenState) => setIsOpen(newOpenState)}
>
  <Menubar.Menu>
    {/* 把图标和Trigger放在同一个容器里，给容器加鼠标悬停事件 */}
    <div
      className={`relative inline-block idle`}
      onMouseEnter={() => setIsOpen(true)}
      onMouseLeave={() => setIsOpen(false)}
    >
      <IconV2 />
      <Menubar.Trigger>
        <ChevronDown width={10} />
      </Menubar.Trigger>
    </div>
    <Menubar.Portal>
      <Menubar.Content 
        align="start"
        {/* 给菜单内容加鼠标进入/离开事件，避免鼠标移到菜单上时关闭 */}
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
      >
        <Menubar.Item onClick={onClick}>Option 1</Menubar.Item>
        <Menubar.Item onClick={onClick}>Option 2</Menubar.Item>
      </Menubar.Content>
    </Menubar.Portal>
  </Menubar.Menu>
</Menubar.Root>

关键说明 #

• 受控模式转换：通过open属性绑定isOpen状态，onOpenChange同步状态变化，确保组件状态完全由我们控制。
• 鼠标事件绑定：将触发区域（图标+Trigger）放在同一个div下，给这个div绑定onMouseEnter（打开菜单）和onMouseLeave（关闭菜单）。
• 菜单内容的事件补充：给Menubar.Content也加上鼠标事件，这样当鼠标从触发区移到菜单内容上时，菜单不会意外关闭。

可选优化：延迟关闭（避免误操作） #

如果想优化体验，比如用户不小心移出触发区时，延迟100ms再关闭菜单，可以用setTimeout实现：

const [isOpen, setIsOpen] = useState(false);
let closeTimeout;

const handleOpen = () => {
  clearTimeout(closeTimeout);
  setIsOpen(true);
};

const handleClose = () => {
  closeTimeout = setTimeout(() => setIsOpen(false), 100);
};

// 然后把所有setIsOpen(true)换成handleOpen，setIsOpen(false)换成handleClose

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