首頁猿問 Ant Design...

Ant Design (Antd), React js中如何獲取Dropdown組件的值

JavaScript

呼喚遠方 2023-03-03 19:28:39

我有一個問題，我無法將 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> ```

查看完整描述

3 回答

回首憶惘然

TA貢獻1847條經驗獲得超11個贊

為了在下拉菜單中獲取所選菜單的值，您需要為每個菜單項分配一個鍵，然后您可以使用組件onClick的 propMenu來獲取值或鍵。

const handleClick = ({key}) => {

console.log(key)

//you can perform setState here

}

const menu = (

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

);

className="ant-dropdown-link"

onClick={(e) => e.preventDefault()}

style={{ color: "#d46b08", fontWeight: "bold" }}

PRICE <DownOutlined />

</a>

</Dropdown>

檢查它在這里工作以供參考。

反對回復 2023-03-03

手掌心

TA貢獻1942條經驗獲得超3個贊

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

}

反對回復 2023-03-03

阿波羅的戰車

TA貢獻1862條經驗獲得超6個贊

您可以使用以下內容：

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>

</Space>

</a>

</Dropdown>

反對回復 2023-03-03

3 回答
0 關注
546 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Ant Design (Antd), React js中如何獲取Dropdown組件的值

Ant Design (Antd), React js中如何獲取Dropdown組件的值

3 回答

添加回答