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

Question

在阅读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，请问如何进行写呢？

Answer 1

你可以将 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>
    </>
  );
};

希望对你有所帮助！

Answer 2

Dropdown的显示由open参数控制（4.23.0 以下为visible）。
看文档不应该只看例子，更要看 API 表格，AntD 的组件 API 放在了文档末尾：下拉菜单 Dropdown。
另外像 Popover、Tooltip 之类的组件，由于 API 列表内容存在包含关系，共用的 API 会放在另一个组件的 API 表格里面：

上面的通用属性也是 API 的一部分，不过只有一个属性是通用的。

Answer 3

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