Next.js中用Next UI v2.2.9实现多级Dropdown遇闪关问题求助

问题原因 #

点击子级Dropdown的触发按钮时，事件会冒泡到父级的DropdownItem，触发父级Dropdown的关闭逻辑，导致整个下拉菜单瞬间关闭。

解决方案一：阻止事件冒泡 #

给子级DropdownTrigger添加点击事件，阻止事件向上传递：

<Dropdown backdrop="blur">
  <DropdownTrigger>
    <Button variant="light">
      Process Team
    </Button>
  </DropdownTrigger>
  <DropdownMenu variant="light" aria-label="Static Actions">
    <DropdownItem>
      <Dropdown>
        {/* 添加onClick阻止事件冒泡 */}
        <DropdownTrigger onClick={(e) => e.stopPropagation()}>
          <Button variant="light">
            Member
          </Button>
        </DropdownTrigger>
        <DropdownMenu>
          <DropdownItem className="text-black">List All Cases</DropdownItem>
          <DropdownItem className="text-black">Reassign Cases</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </DropdownItem>
  </DropdownMenu>
</Dropdown>

解决方案二：调整组件结构 #

直接将子级Dropdown放在父级DropdownMenu中，无需用DropdownItem包裹（DropdownItem本身是可点击元素，会触发父级关闭逻辑）：

<Dropdown backdrop="blur">
  <DropdownTrigger>
    <Button variant="light">
      Process Team
    </Button>
  </DropdownTrigger>
  <DropdownMenu variant="light" aria-label="Static Actions">
    {/* 移除外层DropdownItem，直接放置子级Dropdown */}
    <Dropdown>
      <DropdownTrigger>
        <Button variant="light">
          Member
        </Button>
      </DropdownTrigger>
      <DropdownMenu>
        <DropdownItem className="text-black">List All Cases</DropdownItem>
        <DropdownItem className="text-black">Reassign Cases</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </DropdownMenu>
</Dropdown>

两种方案都能解决菜单自动关闭的问题，方案二更贴合Next UI的组件设计逻辑，推荐优先使用。

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