reactjs - 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, ....}