前言

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

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

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

实现

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

复制 1import React, { useState } from 'react' 
 2import { Table } from 'antd';
 3const AddrList = (props) => {   
 4  //const [selectedRows, setSelectedRows] = useState([])
 5  const [selectedRowKeys, setSelectedRowKeys] = useState([])  
 6  const onSelectChange = (selectedRowKeys, selectedRows) => {     
 7    //setSelectedRows(selectedRows)     
 8    setSelectedRowKeys(selectedRowKeys)   }   
 9  const rowSelection = {     
10    type: 'radio',    
11    selectedRowKeys,    
12    onChange: onSelectChange  
13  }     // 点击整行选择  
14  const onSelectRow = (record) => {  
15    const selectedList = [...selectedRowKeys]
16    if (selectedList[0] === record.id) return     selectedList[0] = record.id     //setSelectedRows([record])   
17    setSelectedRowKeys(selectedList)   
18  }     return (    
19    <Table          
20      rowKey={(row) => row.id}      
21      columns={columns}         
22      dataSource={list}         
23      rowSelection={rowSelection}      
24      onRow={(record) => ({         
25        onClick: () => onSelectRow(record)     
26      })}       
27      />   
28  )
29}

完事~