React表格中复选框默认选中失效问题求助

你的核心问题在于React Table的useRowSelect是受控状态管理，直接操作DOM的defaultChecked/checked或者设置defaultChecked属性都会被Table的内置状态覆盖——因为row.getToggleRowSelectedProps()会传入checked、onChange等受控属性，此时复选框是受控组件，不受原生默认属性或手动DOM操作影响。

正确解决方案：从React Table状态入手初始化选中 #

要实现子行默认全选中，需要在Table的初始状态中直接标记所有子行为选中状态，而非在子组件中修改DOM。

1. 初始化Table的选中状态

在useTable配置中，通过initialState筛选所有子行并标记为选中：

const tableInstance = useTable(
  {
    columns,
    data,
    state: { expanded },
    // 初始化选中所有子行
    initialState: {
      selectedRows: data.reduce((acc, row) => {
        // 根据你的数据结构判断是否为子行，这里用React Table内置的isSubRow属性
        if (row.isSubRow) {
          acc[row.id] = true;
        }
        return acc;
      }, {})
    },
  },
  useExpanded,
  useRowSelect,
  (hooks) => {
    hooks.visibleColumns.push((columns) => {
      return [
        ...columns,
        {
          Header: "Choose Items",
          id: "selection",
          Cell: ({ row }) => (
            details.isSelected ? ( 
              <div>
                <SubRowsCheckBox {...row.getToggleRowSelectedProps()} />
              </div>
            ) : null
          ),
        },
      ];
    });
  }
);

2. 简化子组件（无需手动处理选中状态）

移除子组件中手动设置defaultChecked的逻辑，仅保留indeterminate的处理（因为这是原生DOM属性，React不支持直接作为props传递）：

import { forwardRef, useEffect, useRef } from "react";

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

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

  return (
    <div className="flex items-center">
      <input
        type="checkbox"
        ref={resolvedRef}
        {...rest}
        id="A3-yes"
        name="A3-confirmation"
        className="opacity-0 absolute h-8 w-8"
      />
    </div>
  );
});

动态加载子行的补充处理 #

如果子行是展开父行后才动态加载的，需要监听expanded状态变化，将新加载的子行自动加入选中集合：

import { useState, useEffect } from "react";

// 单独管理选中状态
const [selectedRows, setSelectedRows] = useState({});

// 初始化时先加载已有子行
useEffect(() => {
  const initialSelected = data.reduce((acc, row) => {
    if (row.isSubRow) acc[row.id] = true;
    return acc;
  }, {});
  setSelectedRows(initialSelected);
}, [data]);

// 监听展开状态，新增子行自动选中
useEffect(() => {
  const newSelected = { ...selectedRows };
  tableInstance.rows.forEach(row => {
    if (row.isSubRow && !newSelected[row.id]) {
      newSelected[row.id] = true;
    }
  });
  setSelectedRows(newSelected);
}, [expanded, tableInstance.rows]);

// 在useTable中传入受控状态
const tableInstance = useTable(
  {
    columns,
    data,
    state: { expanded, selectedRows },
    onStateChange: (newState) => {
      if (newState.selectedRows) setSelectedRows(newState.selectedRows);
    },
  },
  useExpanded,
  useRowSelect,
  // ...其他hooks配置
);

为什么之前的方法无效？ #

• defaultChecked：当组件是受控状态（通过row.getToggleRowSelectedProps()传入checked）时，React会忽略defaultChecked属性。
• 手动修改resolvedRef.current.checked：React的状态更新会覆盖DOM手动修改的值，导致部分行不生效。

内容的提问来源于stack exchange，提问作者Muhammad Misbah Ul Haq