当 'selectAll' 复选框位于 parent 或同级组件中且 table 位于另一个组件中时，如何选中所有 mui table 复选框

Question

我有一个 mui table，但它由不同的组件组成，我想在选中 table 标题的复选框时，选中 table 中的所有复选框正文组件。

parent 有一个回调函数，它应该检查所有的复选框列，这就是我需要帮助的地方。是否可以？（我继承了这段代码，对 React 很陌生）

parent 具有 table header 和 table body 组件，例如

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>
)

OTableHead 有 selectAll 复选框（选中 OtableBody 中的所有复选框）

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

并且 OTableBody 使用查询获取数据，将其存储在 'steps' 数组中，该数组用于构建 table 行。

 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>

是否可能，或者我应该在 parent 中获取数据并将其作为道具传递给 table body，或者重组头部和 table body 进入 parent 组件？谢谢

Answer 1

在这种情况下，您可以使用 react sibling

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>
)

当 'selectAll' 复选框位于 parent 或同级组件中且 table 位于另一个组件中时，如何选中所有 mui table 复选框

How do I check all mui table checkboxes when the 'selectAll' checkbox is in a parent or sibling component and the table in another component

reactjs

state

react-props

mui-datatable