将全选复选框添加到material-ui表标题停止在每个单元格上接受输入 - ReactJS

Question

首先，请注意-此代码已移交给我，我已尝试尽可能简化问题以在此处呈现。

背景

有一个二维表正在从 < 获取列标题来自样本数组的strong>data数组和行标题。

样本.sampletests是跨功能对象，如果sample.sampletests[n].testId与表头(data)中的testId匹配，那么它将被检查。

现在我在标题中添加了“全选”功能 - 引入了一个对象数组状态变量 testSelectAll ，具有 testid 和 isselectall 属性，我工作得很好能够随时选中/取消选中每列的复选框为此，

我引入了之前未使用过的复选框的 checked 属性，仅使用 onChange 和 defaultChecked 正在被使用..

问题

，但现在各个单元格复选框已停止从用户处获取输入（选中/取消选中） - 我知道需要在此处实现 onchange 处理程序，但现有代码似乎令人困惑（addItems 数组正在添加对象isselected 属性） - 我就快到了，但只需要理清一下 addItems 减速器变量

这是一个先睹为快的

我的完整运行代码可在codesandbox selectAllCheckbox_Example

{data.map((test, index) => (
              <StyledTableCell>
                {test?.sampleIds !== null &&
                test?.sampleIds.includes(linkData.id) === true ? (
                  <GreenCheckbox
                    icon={<CircleUnchecked />}
                    checkedIcon={<CircleCheckedFilled />}
                    key={index}
                    defaultChecked={setCheckedData(linkData, test)}
                    onChange={(e) => {
                      linkDataHandler(linkData, test, e);
                    }}
                    inputProps={{ "aria-label": "uncontrolled-checkbox" }}
                    checked={
                      (testSelectAll.filter(
                        (t) => t.testid === test.testListId
                      ).length > 0
                        ? testSelectAll.filter(
                            (t) => t.testid === test.testListId
                          )[0].isSelectAllChecked
                        : false) ||
                      samples
                        .map((elm) => elm.sampleTests)
                        .flat()
                        .some(
                          (elm) =>
                            linkData.id === elm.sampleId &&
                            test.testListId === elm.testList.id
                        )/* ||
                      addItems.filter(
                        (a) =>
                          linkData.id === a.sampleId &&
                          test.testListId === a.TestId
                      ).isSelected*/
                    }
                  />
                ) : (
                  <div style={{ padding: "9px" }}>
                    <Tooltip
                      title={<Typography>Test not applicable</Typography>}
                    >
                      <RemoveCircleTwoToneIcon />
                    </Tooltip>
                  </div>
                )}
              </StyledTableCell>
            ))}
          

一旦我取消注释以下代码，默认和全选选项将停止工作

addItems.filter(
                        (a) =>
                          linkData.id === a.sampleId &&
                          test.testListId === a.TestId
                      ).isSelected