请问antd/dropdown想要对button点击弹出，应该怎么写呢？

作者站长头像
站长
· 阅读数 6

在阅读antd dropdown文档的时候，

我看到代码都是这样写的：

const App: React.FC = () => (
  <Dropdown menu={{ items }} trigger={['click']}>
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        Click me
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>
);

请问，现在比如有一个button：

<button
  onClick={() => {
    // 想要在这里进行弹出dropdown
  }}
></button>

想要点击button弹出dropdown，请问如何进行写呢？

回复
1个回答
avatar
test
2024-06-26

你可以将 Dropdown 变成受控组件，即使用 open 属性控制 Dropdown 的展开和收起。

const App: React.FC = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        onClick={() => {
          setOpen((v) => !v);
        }}
      >
        Click
      </button>
      <Dropdown menu={{ items }} trigger={["click"]} open={open}>
        <a onClick={(e) => e.preventDefault()}>
          <Space>
            Click me
            <DownOutlined />
          </Space>
        </a>
      </Dropdown>
    </>
  );
};

希望对你有所帮助！

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容