如何检查所有MUI表复选框时，“ selectall”复选框在父或同级组件中，以及另一个组件中的表格

Question

我有一个MUI表，但是它是在单独的组件中构造的，我想检查Tableheader的复选框时，请检查Tabtoby Component中的所有复选框。

父级具有回调函数，该函数应该检查所有复选框列，在这里我需要帮助。是否可以？ （我已经继承了此代码，并且是对反应的新手）

父母有桌子标头和桌子主体组件，例如

const onAllRowsSelected = useCallback(() => {

},[]);


return (
    <TableContainer>
        <Table>
            <OTableHead
                columns={columns}
                onSelectAllClick={onAllRowsSelected}
                numSelected={0}
                rowCount={steps.length}
            />
            <OTableBody
                columns={columns}
                deviceId={deviceId}
                optimise={optimise}
                onSelected={handleSelected}
            />
        </Table>
    </TableContainer>
)

Otabobabehead具有可以选择的复选框（在OTable Body中检查所有复选框）

return (
    <TableHead>
        <TableRow>
            <TableCell key={'drag'}/>
            <TableCell key={'select'}>
                <Checkbox
                    onChange={onSelectAllClick}
                    inputProps={{ 'aria-label': 'Select all steps' }}
                />
            </TableCell>

            {columns.map((column) => (
                <TableCell key={column.field}>
                    {column.heading}
                </TableCell>
            ))}
        </TableRow>
    </TableHead>
);

otabybody使用查询获取数据，将其存储在“步骤”数组中，该数组用于构建表行。

 const data = useQuery(o_data_query, {
    variables: {
        Id: Id,
        send: send
    },
    fetchPolicy: 'cache-and-network'
});

let steps = resOData.data != undefined ?  resOData.data.jobO.data : [];

<TableBody>
  {steps.map((step, index) => (
      <TableRow
         hover={true}
         key={step.workStepId}
         selected={isItemSelected}
         aria-checked={isItemSelected}
      >
          <TableCell  key={'select'}  padding="checkbox"  >
             <Checkbox
                 checked={isItemSelected}
                 inputProps={{ 'aria-labelledby': step.workStepId }}
                 onClick={(event) => handleClick(event, step.workStepId)}
             />
          </TableCell>
      </TableRow>
   ))}
</TableBody>

是可能的，还是我宁愿在父母中获取数据并将其传递给桌子主体，还是将头部和桌子主体重组到父组件中？ 谢谢

在这种情况下，您可以使用React兄弟姐妹进行管理

const [selectAll, setSelectAll] = useState('Default value');

const onAllRowsSelected = useCallback(() => {
 or set here setSelectAll()
 ......
},[]);


return (
    <TableContainer>
        <Table>
            <OTableHead
                columns={columns}
                onSelectAllClick={onAllRowsSelected}
                numSelected={0}
                setSelectAll={setSelectAll}
                rowCount={steps.length}
            />
            <OTableBody
                selectAll={selectAll}
                columns={columns}
                deviceId={deviceId}
                optimise={optimise}
                onSelected={handleSelected}
            />
        </Table>
    </TableContainer>
)

Answer 1