React Table - useRowSelect 的无线电输入

Question

如何在 React Table 中使用单选输入而不是复选框进行选择table 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 。问题说已解决，但我不完全确定。
如果您在获取行数据时遇到问题，请尝试查看以下链接是否有帮助 https://codesandbox.io/s/tannerlinsleyreact-table-row-selection-hoisted-b4dvq?from-embed

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 我们 deselect 所有行，select“点击”行。 :)

 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

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

将复选框更改为无线电输入

IndeterminateCheckbox 组件内部

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

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

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

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

if checked -> 更改为unchecked and

if unchecked -> 更改为 checked

// 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
                    ]);
                    })

React Table - useRowSelect 的无线电输入

React Table - radio input for useRowSelect

javascript

reactjs

react-table