作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个问题,我无法将 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> ```
最佳答案
为了获取下拉菜单中所选菜单的值,您需要为每个菜单项分配一个键,然后您可以使用 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>
检查它是否正常工作 here供引用。
关于javascript - 如何在 Ant Design (Antd)、React js 中获取 Dropdown 组件的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63905902/
我是一名优秀的程序员,十分优秀!