antd Table点击整行选中

#前言

antd官网例子上默认是点击checkbox或者radio才会选中，这对体验上来说有点不太方便，所以需求是要做成点击Table的整行直接触发选中。

其实官方也有给了个例子：codesandbox.io/s/000vqw38r…，这是使用class写的checkbox框。

但是我项目是使用hooks的，而且是个radio框，所以就自己写了个

#实现

这个其实没啥好多说的，直接看代码好了

复制import React, { useState } from 'react' 
import { Table } from 'antd';
const AddrList = (props) => {   
  //const [selectedRows, setSelectedRows] = useState([])
  const [selectedRowKeys, setSelectedRowKeys] = useState([])  
  const onSelectChange = (selectedRowKeys, selectedRows) => {     
    //setSelectedRows(selectedRows)     
    setSelectedRowKeys(selectedRowKeys)   }   
  const rowSelection = {     
    type: 'radio',    
    selectedRowKeys,    
    onChange: onSelectChange  
  }     // 点击整行选择  
  const onSelectRow = (record) => {  
    const selectedList = [...selectedRowKeys]
    if (selectedList[0] === record.id) return     selectedList[0] = record.id     //setSelectedRows([record])   
    setSelectedRowKeys(selectedList)   
  }     return (    
    <Table          
      rowKey={(row) => row.id}      
      columns={columns}         
      dataSource={list}         
      rowSelection={rowSelection}      
      onRow={(record) => ({         
        onClick: () => onSelectRow(record)     
      })}       
      />   
  )
}

完事~