[英]How to get value of Dropdown component in Ant Design (Antd), React js
[英]Ant Design Dropdown - Access props value inside children menus [ React ]
我有一個像 Facebook 提要這樣的帖子列表,每個帖子都有一個帶有“編輯、刪除、報告”的下拉菜單。
我使用 Ant Design UI,問題是我無法訪問子菜單中的道具值“DeleteId”。
但是我可以訪問組件內的道具值(deleteId)。
根據這里的Ant Design ,子菜單(menu)是在組件外聲明的。
//-------------- Outside Component --------------------
const onClick = function (info) {
console.log(info)
};
const menu = (
<Menu onClick={onClick}>
{
// this.props.deleteId <=== this doesn't work, props value is "undefined"
}
<Menu.Item key="1">Edit</Menu.Item>
<Menu.Item key="delete-Id-here">Delete</Menu.Item>
<Menu.Item key="3">Report</Menu.Item>
</Menu>
);
//-------------- Inside Component --------------------
class Demo extends React.Component {
render(){
console.log("deleteId = "+ this.props.deleteId +" ( Inside component ) ")
// this.props.deleteId <=== This props value works fine, I can access all props data inside component
return (
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
<Icon style={{fontSize:24}} type="ellipsis" theme="outlined" />
</a>
</Dropdown>
)
}
}
ReactDOM.render( <Demo deleteId="123456"/>,
mountNode);
可能,它不知道子菜單中的“道具”值
看來您只是缺少將道具傳遞給menu
功能組件。 下面是將deleteId
作為參數傳遞給menu
函數的修改代碼。
const menu = (deleteId) => (
<Menu onClick={onClick}>
<Menu.Item key="1">Edit</Menu.Item>
<Menu.Item key="delete-Id-here">Delete {deleteId}</Menu.Item>
<Menu.Item key="3">Report</Menu.Item>
</Menu>
);
Demo
class Demo extends React.Component {
render(){
return (
<Dropdown overlay={menu(this.props.deleteId)}>
<a className="ant-dropdown-link" href="#">
<Icon style={{fontSize:24}} type="ellipsis" theme="outlined" />
</a>
</Dropdown>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.