如何通过两个不同按钮触发Radix UI下拉菜单？

情况1：按钮与下拉菜单在同一组件内 #

直接给「编辑信息」按钮绑定点击事件，调用状态更新函数打开菜单：

import { useState } from 'react';
import { DropdownMenu } from '@radix-ui/react-dropdown-menu';
import NewIcon from './NewIcon';
import Button from './Button';

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

  return (
    <>
      <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
        <DropdownMenu.Trigger>
          <NewIcon/>
        </DropdownMenu.Trigger>

        <DropdownMenu.Portal forceMount>
          <DropdownMenu.Content>
            {/* 你的菜单内容 */}
          </DropdownMenu.Content>
        </DropdownMenu.Portal>
      </DropdownMenu.Root>

      <div>           
        <Button onClick={() => setIsOpen(true)}>
          Edit information
        </Button>
      </div>
    </>
  );
};

情况2：按钮在独立组件内 #

如果「编辑信息」按钮属于另一个组件，需要将状态更新函数通过props传递过去：

1. 父组件传递状态更新函数：

// 父组件
import { useState } from 'react';
import { DropdownMenu } from '@radix-ui/react-dropdown-menu';
import NewIcon from './NewIcon';
import EditButton from './EditButton';

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

  return (
    <>
      <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
        {/* 下拉菜单内容同上 */}
      </DropdownMenu.Root>
      <EditButton onOpenMenu={() => setIsOpen(true)} />
    </>
  );
};

2. 子组件接收并使用：

// EditButton组件
import Button from './Button';

const EditButton = ({ onOpenMenu }) => {
  return (
    <div>           
      <Button onClick={onOpenMenu}>
        Edit information
      </Button>
    </div>
  );
};

export default EditButton;

补充说明 #

• 若需要点击按钮时切换菜单的打开/关闭状态，可把setIsOpen(true)替换为setIsOpen(prev => !prev)
• Radix UI的受控模式会自动处理菜单的关闭逻辑（比如点击外部区域、按ESC键），无需额外编写代码

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