需求:表格的每行操作里,有一个Dropdown组件,里面是menu组件,这里在列进行渲染的时候,把行数据传给menu,menu被点击的时候获取到行数据进行弹框展示
代码分析:
1、表格的列渲染操作列的时候,Dropdown的api里有overlay属性,这个里是menu标签,我这里用的bind方法绑定,并且把行数据传给下拉框,然后menu组件就可以获取到行数据
{
title: '操作',
dataIndex: 'operation',
key: 'operation',
ellipsis: true,
align:'center',
render: (text,record) => {
return (
<Space size="middle">
//menu单独定义的,也就是第二步
<Dropdown overlay={menu.bind(this,record)} record={record} >
<a>
操作
</a>
</Dropdown>
</Space>
)
},
}
2、menu,这里获取到record行数据,再传给点击事件
const menu =(record)=>{
return (
<Menu onClick={this.handleChildActions.bind(this,record)} record={record}>
<Menu.Item key='adjustment'>
<span>调仓</span>
</Menu.Item>
<Menu.Item key='redemption'>
<span>赎回</span>
</Menu.Item>
</Menu>
)
}
3、menu点击事件,事件本来就有一些值,比如key,item,可以查看api
handleChildActions = (row,key)=>{
if (key==='adjustment'){
console.log('子基金调仓:')
}
else {
console.log('子基金赎回:')
}
}