MUI跨组件场景下点击表头全选复选框选中表体全部复选框实现咨询

当前拆分结构无法直接实现全选功能，核心原因是行数据steps、选中状态都存储在OTableBody组件内部，父组件和表头组件没有权限访问这部分数据，触发全选回调后无法同步到表体的复选框状态。

根据项目迭代需求可以选择以下两种实现方案：

方案1：最小改动适配存量代码（适合临时需求、不想重构现有逻辑） #

不需要调整数据获取逻辑，仅通过状态透传实现：

• 父组件新增两个状态：allSelected（全选触发信号）、selectedIds（存储所有选中的行ID）
• 把allSelected、selectedIds、修改选中状态的setSelectedIds通过props传递给OTableBody组件
• OTableBody内部监听allSelected的变化，值为true时把当前所有steps的workStepId全部存入selectedIds，值为false时清空selectedIds
• 行选中状态直接判断当前行的workStepId是否在selectedIds数组中即可

代码示例：

// 父组件新增状态逻辑
const [allSelected, setAllSelected] = useState(false);
const [selectedIds, setSelectedIds] = useState([]);

const onAllRowsSelected = useCallback(() => {
  setAllSelected(prev => !prev);
},[]);

// 渲染时透传参数给OTableBody
return (
  <TableContainer>
      <Table>
          <OTableHead
              columns={columns}
              onSelectAllClick={onAllRowsSelected}
              numSelected={selectedIds.length}
              rowCount={steps.length}
          />
          <OTableBody
              columns={columns}
              deviceId={deviceId}
              optimise={optimise}
              selectedIds={selectedIds}
              setSelectedIds={setSelectedIds}
              allSelected={allSelected}
              onSelected={handleSelected}
          />
      </Table>
  </TableContainer>
)

// OTableBody内部新增逻辑
useEffect(() => {
  // 全选状态变化时同步选中的行ID
  if(allSelected) {
    const allIds = steps.map(item => item.workStepId);
    setSelectedIds(allIds);
  } else {
    setSelectedIds([]);
  }
}, [allSelected, steps, setSelectedIds]);

// 行选中判断与点击逻辑调整
const isItemSelected = (id) => selectedIds.includes(id);
const handleClick = (event, id) => {
  setSelectedIds(prev => 
    prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id]
  );
  onSelected?.(event, id);
}

方案2：状态上移重构（适合长期迭代维护的项目，更符合React最佳实践） #

这种方案可维护性和扩展性更高：

• 将OTableBody内部的useQuery数据获取逻辑上移到父组件，父组件拿到steps数据后通过props传递给两个子组件
• 所有选中相关状态（选中ID集合、全选状态）全部由父组件统一管理，子组件仅作为纯UI组件负责渲染和触发回调
• 不需要合并表头、表体组件，保持拆分的复用性的同时逻辑更清晰，后续新增批量操作、跨页选中这类需求的改造成本很低

内容的提问来源于stack exchange，提问作者Neal Rogers