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

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

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>);

}

Answer 3

您可以使用以下内容：

export const items = [

  {

    label: "View Profile",

    key: "view-profile",

  },

];

  const handleDropdownItemClick = (e) => {

    console.log(e.key);

  };

 <Dropdown

            menu={{

              onClick: handleDropdownItemClick,

              items: items,

            }}

            placement="bottomRight"

            className="text-white"

          >

            <a>

              <Space>

                <DownOutlined />

              </Space>

            </a>

  </Dropdown>