需求：表格的每行操作里，有一個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)=>{console.log('子基金操作:',row,key)if (key==='adjustment'){console.log('子基金調倉：')}else {console.log('子基金贖回：')} }

?

總結

以上是生活随笔為你收集整理的react+antd表格操作列加Dropdown和menu写法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。