React-Table：仅选择单行，禁用多行选择

Question

我使用单选按钮来选择行。如何禁用多行选择以便一次只能选择一行？

我正在使用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,
      ]);
    }
  );

Answer 1

我对这个问题困惑了一段时间，我使用的解决方案似乎工作正常并且非常简单。在 onClick() 方法中使用以下内容：

  onClick={() => {
    toggleAllRowsSelected(false);
    row.toggleRowSelected();
  }

toggleAllRowsSelected当从 useTable 中解构变量时，您需要将其包括在内。

 const { toggleAllRowsSelected, selectedFlatRows,...} = useTable({ columns, data, ....}