React Table - useRowSelect 的单选输入

Question

如何在 React Table 中使用单选输入而不是复选框作为可选表？

有一个复选框但不是单选按钮的示例：https://github.com/tannerlinsley/react-table/blob/master/examples/row-selection/src/App.js

更改 InminatedCheckox 以使用无线电输入不起作用，因为反应表中的选择状态未更新：

const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
    const defaultRef = React.useRef();
    const resolvedRef = ref || defaultRef;

    useEffect(() => {
      resolvedRef.current.indeterminate = indeterminate;
    }, [resolvedRef, indeterminate]);

    return <input name="select-radio" type="radio" ref={resolvedRef} {...rest} />
    );
  });

它看起来正确，但没有传递正确的选择状态：

Answer 1

快速浏览了一下。尝试这个：

• 拥有 rowId 的状态

const [selectedRowId, setSelectedRowId] = useState(null);

• 传递autoResetSelectedRows: false,给useTable函数

• 手动为无线电编写点击处理程序

  onClick={() => setSelectedRowId(row.id)}

我在这里整理了工作代码。 https://codesandbox.io/s/objective-faraday-gzf7y

笔记：

• 快速变化的值可能会出现一些小问题selectedFlatRows。我还没有充分研究这个问题，但我发现了https://github.com/tannerlinsley/react-table/issues/1740。该问题说已修复，但我不完全确定。
• 如果您在获取行数据时遇到问题，请尝试查看以下链接是否有帮助如何 获取 React Table Row Data Onclick https://codesandbox.io/s/tannerlinsleyreact-table-row-selection-hoisted-b4dvq?from -嵌入 单击反应表时选择行