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]})
}
}}
然后最终效果就实现了,完美解决,完结撒花,效果图如下!