![](/img/trans.png)
[英]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.