React Table - useRowSelect 的无线电输入

Question

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

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

将 InminatedCheckox 更改为使用无线电输入不起作用，因为 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。该问题说已修复，但我不完全确定。
• 如果您在获取行数据时遇到问题，请尝试查看以下链接是否有帮助 如何获取React Table Row Data Onclick https://codesandbox.io/s/tannerlinsleyreact-table-row-selection-hoisted-b4dvq?from-embed 单击反应表时选择行

Answer 2

基于之前的答案，以下解决方案进行了一些改进

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

   InfiniteateCheckbox 组件内部

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

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

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

   c) row.getToggleRowSelectedProps().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
                       ]);
                       })
   

Answer 3

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

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

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

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

 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 4

感谢您的代码。这对我有用。但是在 onClick 上，我想访问该行第一列的值，我该怎么做？