antd Table点击整行选中

前言

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

其实官方也有给了个例子：https://codesandbox.io/s/000vqw38rl，这是使用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)
            })}
            />
    )
}

完事~