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 函数

• 手动为收音机编写一个点击处理程序

  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

Answer 2

如果有人还在为此苦苦挣扎，我找到了不同的解决方案。

IndeterminateCheckbox 相同，输入类型略有变化：

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

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

        return (
            <>
                {/*<input type="checkbox" ref={resolvedRef} {...rest} />*/}
                <input type="radio" ref={resolvedRef} {...rest} />
            </>
        );
    }
);

然后onClick我们取消选择所有行，并选择“点击”行。 :)

 const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
            toggleAllRowsSelected,
            toggleRowSelected,
            state: { selectedRowIds },
        } = useTable(
            {
                columns,
                data,
            },
            useRowSelect,
            hooks => {
                hooks.visibleColumns.push(columns => [
                    // Let's make a column for selection
                    {
                        id: "selection",
                        // The cell can use the individual row's getToggleRowSelectedProps method
                        // to the render a checkbox
                        Cell: ({ row }) => {
                            return (
                                <div>
                                    <IndeterminateCheckbox
                                        {...row.getToggleRowSelectedProps()}
                                        onClick={() => {
                                            toggleAllRowsSelected(false);
                                            toggleRowSelected(row.id, true);
                                        }}
                                    />
                                </div>
                            );
                        }
                    },
                    ...columns
                ]);
            }
        );

Answer 3

根据之前的回答，下面的解决方案有一些改进

1. 将复选框更改为单选输入

   IndeterminateCheckbox 组件内部

   Remove  <input type="checkbox" ref={resolvedRef} {...rest} />*/}
   Add     <input type="radio" ref={resolvedRef} {...rest} />
   

2. a) 如果您想最初自动选择任何行，请设置初始状态

   b) 取消选择所有单选按钮

   c) row.getToggleRowSelectedProps().checked 给出该行单选按钮的当前状态。因此，相应地切换该值。即

   如果 checked -> 更改为 unchecked 和

   如果未选中 -> 改为选中

   // This selectedRowIds state gives the information about which row is selected currently.
   const{state: { selectedRowIds }}=useTable(
   {
    ....
    initialState: {
         columns,
         data,
         selectedRowIds: { 2: true },  //a) I want my second row to be autoselected initially
      },
    },
    useRowSelect,
        hooks => {
            hooks.visibleColumns.push(columns => [
                {
                    id: "selection",                    
                    Cell: ({ row, toggleAllRowsSelected, toggleRowSelected }) => {                      
                       const currentState = row.getToggleRowSelectedProps();
                       return (
                          <IndeterminateCheckbox
                             {...currentState}
                             onClick={() => {
                               // b)
                                 toggleAllRowsSelected(false);
                               // c)
                                 toggleRowSelected(row.id, !currentState.checked);
                         }} />)
   
                       }},
                         ...columns
                       ]);
                       })