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}) => {&nbsp; console.log(key)&nbsp; //you can perform setState here}const menu = (&nbsp; <Menu onClick={handleClick}>&nbsp; &nbsp; <Menu.Item key="Recommend">Recommend</Menu.Item>&nbsp; &nbsp; <Menu.Item key="Newest">Newest</Menu.Item>&nbsp; &nbsp; <Menu.Item key="Lowest Price">Lowest Price</Menu.Item>&nbsp; &nbsp; <Menu.Item key="Highest Price">Highest Price</Menu.Item>&nbsp; </Menu>);<Dropdown overlay={menu} trigger={["click"]}>&nbsp; &nbsp; <a&nbsp; &nbsp; &nbsp; className="ant-dropdown-link"&nbsp; &nbsp; &nbsp; onClick={(e) => e.preventDefault()}&nbsp; &nbsp; &nbsp; style={{ color: "#d46b08", fontWeight: "bold" }}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; PRICE <DownOutlined />&nbsp; &nbsp; </a></Dropdown>检查它在这里工作以供参考。

Answer 2

该Dropdown组件不调用任何onChange属性。它具有onVisibleChange每次“下拉触发器”（悬停、单击、右键单击）完成时都会调用的属性。做这样的事情：const SomeComponent = _props =>{&nbsp; const [visible, setVisible] = React.useState(false);&nbsp;&nbsp;&nbsp; return (<Dropdown overlay={menu} visible={visible} onVisibleChange={isVisible => setVisible(isVisible)} >&nbsp; &nbsp; <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>&nbsp; &nbsp; &nbsp; Hover me <DownOutlined />&nbsp; &nbsp; </a>&nbsp; </Dropdown>);}

Answer 3

您可以使用以下内容：export const items = [&nbsp; {&nbsp; &nbsp; label: "View Profile",&nbsp; &nbsp; key: "view-profile",&nbsp; },];&nbsp; const handleDropdownItemClick = (e) => {&nbsp; &nbsp; console.log(e.key);&nbsp; };&nbsp;<Dropdown&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; menu={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick: handleDropdownItemClick,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items: items,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placement="bottomRight"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="text-white"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Space>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DownOutlined />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Space>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; </Dropdown>