如何通过悬停激活React Aria/NextUI下拉菜单？

要实现悬停触发NextUI下拉菜单，核心是通过React状态变量控制菜单的展开/收起，结合鼠标事件完成状态切换，具体步骤如下：

1. 定义状态变量 #

使用React的useState钩子创建isOpen状态，用来控制菜单的显示状态：

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

2. 绑定鼠标事件到触发器 #

给DropdownTrigger绑定onMouseEnter和onMouseLeave事件，分别将isOpen设为true和false，同时把这个状态传递给Dropdown组件的isOpen属性：

3. 优化菜单区域的悬停体验（可选） #

为了避免用户从触发器移到菜单的过程中菜单突然关闭，给DropdownMenu也绑定相同的鼠标事件，保持菜单展开状态。

完整代码示例 #

import { useState } from 'react';
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@nextui-org/react';

export default function HoverActivatedDropdown() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Dropdown isOpen={isOpen}>
      <DropdownTrigger 
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
      >
        <span>悬停我打开菜单</span>
      </DropdownTrigger>
      <DropdownMenu
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
        aria-label="菜单选项"
      >
        <DropdownItem>查看详情</DropdownItem>
        <DropdownItem>编辑内容</DropdownItem>
        <DropdownItem>删除项目</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

关键说明 #

• isOpen是控制菜单展开的核心变量，直接关联Dropdown组件的同名属性。
• 同时给触发器和菜单绑定鼠标事件，是为了保证交互的流畅性，避免用户操作时菜单意外关闭。
• 如果不需要菜单区域的悬停保持，仅保留DropdownTrigger上的事件即可。

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