javascript - React Table - useRowSelect 的单选输入

Question

如何在 React Table 中使用单选输入而不是复选框来选择表？

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

将 IndeterminateCheckox 更改为使用单选输入不起作用，因为 React Table 中的选择状态未更新:

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功能

手动为 radio 编写点击处理程序
onClick={() => setSelectedRowId(row.id)}

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

备注:

selectedFlatRows 的值快速变化可能存在一些小问题.我还没有完全研究过这个问题，但我发现了 https://github.com/tannerlinsley/react-table/issues/1740 .问题说已解决，但我不完全确定。

如果您在抓取行数据时遇到问题，请尝试查看以下链接是否有帮助
How to get React Table Row Data Onclick
https://codesandbox.io/s/tannerlinsleyreact-table-row-selection-hoisted-b4dvq?from-embed
Select row on click react-table