antd Table点击整行选中
antd官网例子上默认是点击checkbox或者radio才会选中,这对体验上来说有点不太方便,所以需求是要做成点击Table的整行直接触发选中。其实官方也有给了个例子https//codesandbox.io/s/000vqw38rl,这是使用class写的checkbox框。但是我项目是使用hooks的,而且是个radio框,所以就自己写了个。...
·
前言
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)
})}
/>
)
}
完事~
更多推荐
已为社区贡献2条内容
所有评论(0)