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,
  }),
};
 <Table
   rowSelection={{
     type: selectionType,
     ...rowSelection,
    }}
    columns={columns}
    dataSource={data}
   />
  

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

const  onChangeHandle =  (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
 <Table
   rowSelection={{
          type: 'radio'，
          onChange:  onChangeHandle,
        }}
        columns={columns}
        dataSource={data}
      />

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

image.png

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

const  onChangeHandle =  (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
 <Table
        rowSelection={{
          type: ’radio‘，
          onChange:  onChangeHandle,
        }}
        columns={columns}
        dataSource={data}
        onRow={(record) => {
              return {
                onClick: () => {
                  rowSelectionChange([record.id], [record])
                },
              }
            }}
      />
    </div>

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

image.png

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

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

const  onChangeHandle =  (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    setSelectRowKeys(selectedRowKeys)  
  },
 <Table
        rowSelection={{
          type: ’radio‘，
          onChange:  onChangeHandle,
          selectedRowKeys: selectRowKeys,
        }}
        columns={columns}
        dataSource={data}
        onRow={(record) => {
              return {
                onClick: () => {
                  rowSelectionChange([record.id], [record])
                },
              }
            }}
      />
    </div>