REACT 使用antd Table 中rowSelection遇到的問題

首先項目是尚硅谷的后台谷粒平台,在用到antd Table 中的 rowSelection時,出現了一個問題(P87時遇到的問題): 表格中的每一項前面有一個radio單選框可以選中,本來是想利用rowSelection來選擇行時就可以選中該單選框(見下圖)

但是會發現有一個bug,就是此時移到角色旁邊的單選框,鼠標變為觸手時,再點擊卻無任何反應,見下圖:

經過一系列的查找文檔和百度,最終發現為rowSelection配置了selectedRowKeys屬性而沒有配置onChange導致的,
在 rowSelection中配置onChange函數,其默認有兩個參數,官方文檔中顯示的類型為function(selectedRowKeys, selectedRows),其中selectedRows便是我們需要的,其中存儲了點擊時該行角色的數據,我們可以由此來更新state中的role最終代碼如下:

rowSelection={{type: 'radio',
	selectedRowKeys: [role._id],
	onChange: (_, selectedRows) => {
	this.setState({role:selectedRows[0]})
	}
}}

然后最終效果就實現了,完美解決,完結撒花,效果圖如下!