在 React Table 7.1.0 中一次只能选择一行

Question

我正在尝试实现一次只能选择一行的反应表。我已经在反应表中经历了很多多行选择的示例，但就我而言，当用户单击单选按钮时，用户只能选择一行，但目前可以选择所有行。有人可以帮我解决这个问题吗？

Answer 1

我知道这是一个老问题，但也许有人会发现这个解决方案很有用。从版本 7 开始，react-table 提供了一个stateReducer可用于跟踪和更改表状态的方法。（在 v7 之前它有reducerHandlers，但我没有深入研究）。您可以按如下方式修改状态：

useTable(
    {
      columns,
      data,
      stateReducer: (newState, action) => {
          if (action.type === "toggleRowSelected") {
            newState.selectedRowIds = {
              [action.id]: true
            }
          }

          return newState;
      },
    }
    ...

这是包含所描述的更改的CodeSandbox