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

Question

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

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与描述的变化