如何在 Ant Design (Antd), React js 中获取 Dropdown 组件的值

Question

我有一个问题，我无法将 Dropdown 的值取出到 setState 或类似的东西。 大家知道怎么修吗？ 我试图通过 onChange 访问它，但仍然无法正常工作。

代码如下：

const menu = (
    <Menu onSelect={(e) => console.log(e)}>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Recommended
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Newest
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Lowest Price
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer">
          Highest Price
        </a>
      </Menu.Item>
    </Menu>
  );


<Dropdown overlay={menu1} trigger={['click']}>
            <a
              className="ant-dropdown-link"
              onClick={(e) => e.preventDefault()}
              style={{ color: '#d46b08', fontWeight: 'bold' }}
            >
              PRICE <DownOutlined />
            </a>
</Dropdown> ```

Answer 1

为了在下拉菜单中获取所选菜单的值，您需要为每个菜单项分配一个键，然后您可以使用Menu组件的onClick属性来获取值或键。

const handleClick = ({key}) => {
  console.log(key)
  //you can perform setState here
}

const menu = (
  <Menu onClick={handleClick}>
    <Menu.Item key="Recommend">Recommend</Menu.Item>
    <Menu.Item key="Newest">Newest</Menu.Item>
    <Menu.Item key="Lowest Price">Lowest Price</Menu.Item>
    <Menu.Item key="Highest Price">Highest Price</Menu.Item>
  </Menu>
);

<Dropdown overlay={menu} trigger={["click"]}>
    <a
      className="ant-dropdown-link"
      onClick={(e) => e.preventDefault()}
      style={{ color: "#d46b08", fontWeight: "bold" }}
    >
      PRICE <DownOutlined />
    </a>
</Dropdown>

检查它在这里工作以供参考。

Answer 2

Dropdown组件不调用任何onChange属性。 它具有onVisibleChange属性，每次完成“下拉触发器”（悬停、单击、右键单击）时都会调用该属性。 做这样的事情：

const SomeComponent = _props =>
{
  const [visible, setVisible] = React.useState(false);
  
  return (<Dropdown overlay={menu} visible={visible} onVisibleChange={isVisible => setVisible(isVisible)} >
    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
      Hover me <DownOutlined />
    </a>
  </Dropdown>);
}

工作笔在这里