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]})
	}
}}

然后最终效果就实现了,完美解决,完结撒花,效果图如下!