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]);