如何在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

您可以使用以下内容：

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>

Answer 3

Dropdown组件不调用任何onChange属性。它具有CCD_ 5属性；下拉触发器"；(无论是悬停、单击还是右键单击(都已完成。这样做：

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

此处为工作笔