如何解决React-Table:仅选择单行,禁用多行选择
我正在使用单选按钮选择行。如何禁用多行选择,以便一次只能选择一行?
我正在使用selectedFlatRows
,但允许多行选择。
const Table = props => {
const {
getTableProps,getTableBodyProps,headerGroups,page,prepareRow,selectedFlatRows,} = useTable(
{
columns,data: props.linkedProducts,},useSortBy,usePagination,useRowSelect,hooks => {
hooks.visibleColumns.push(columns => [
{
id: 'selection',disableGlobalFilter: true,accessor: 'selection',Cell: ({row}) => (
<RadioButton
{...row.getToggleRowSelectedProps()}
/>
),...columns,]);
}
);
解决方法
我对这个问题困惑了一段时间,我使用的解决方案似乎工作正常并且非常简单。在您的 onClick() 方法中使用以下内容:
onClick={() => {
toggleAllRowsSelected(false);
row.toggleRowSelected();
}
从 useTable 解构变量时,您需要包含 toggleAllRowsSelected
。
const { toggleAllRowsSelected,selectedFlatRows,...} = useTable({ columns,data,....}
,
我使用了一种解决方法来完成这项工作,基本上是在状态中设置选定的 rowId。
const [selectedRowId,setSelectedRowId] = useState('0');
const {
getTableProps,getTableBodyProps,headerGroups,rows,prepareRow,} = useTable(
{
columns,},usePagination
);
这是表格代码的缩短版本。如您所见,每当用户单击行或选中单选按钮时,它都会设置状态。
<TableV2.Body {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
return (
<TableV2.Row
key={row.id}
onClick={() => setSelectedRowId(row.id)}
{...row.getRowProps()}
bg={row.id !== selectedRowId ? 'white' : 'gray.10'}
>
<TableV2.Cell key={`${row.id}-radio`}>
<Box testIds={{test: 'sku-detail-radio-button'}} mt={-12}>
<RadioButton
value={row.id}
checked={row.id === selectedRowId}
onChange={() => setSelectedRowId(row.id)}
/>
</Box>
</TableV2.Cell>
如果要将selectedRowId
传递给父组件,可以使用useEffect
:
useEffect(() => {
props.onRowSelection(selectedRowId);
},[props,selectedRowId]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。