Antd Table点击行选中单选框高亮行

Table组件中需要点击单选框才能选中该选项,但是为了优化用户体验,需要点击行就可以实现选中加高亮


image.png

组件代码:

const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};
 

当只需要单选框时,修改代码如下

const  onChangeHandle =  (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
 

接下来需要点击行触发事件,查看Table的ApI文档有属性 onRow


image.png

行点击的样式有很多:单击,双击,鼠标移入移出等
我们想让点击行也有点击选项框的事件 可以直接执行点击单选框的事件 但是要根据单选框点击事件函数内的参数传参
***此处注意:onRow中 事件必须写在 onClick:()=>{ 执行内容 } 如果要执行一个函数 也需写在里面 不可以直接 onClick:onClickHandle 这样代码会变成自执行 没有点击 启动页面就会依次触发
修改代码如下:

const  onChangeHandle =  (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
 
{ return { onClick: () => { rowSelectionChange([record.id], [record]) }, } }} />

此时打印事件结果发现行点击事件也可以实现单选框点击的功能了,但是没有单选框选中状态和高亮
此时查看API文档找到选中状态有关的属性
在rowSelection选择功能的配置里面找到 selectedRowKeys

image.png

此时把选中的数组变成受控值
最终代码:即可实现

const [selectRowKeys,setSelectRowKeys] = useState([])

const  onChangeHandle =  (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    setSelectRowKeys(selectedRowKeys)  
  },
 
{ return { onClick: () => { rowSelectionChange([record.id], [record]) }, } }} />

你可能感兴趣的:(Antd Table点击行选中单选框高亮行)