javascript - React Table - useRowSelect 的单选输入

问题描述

如何在 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} />
    );
  });

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

标签： javascriptreactjsreact-table

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

有 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 -在点击反应表上嵌入选择行

javascript - React Table - useRowSelect 的单选输入

问题描述

解决方案

推荐阅读