0

首先提个醒 - 此代码已交给我，我已尝试尽可能简化问题，以便在此处呈现。

背景

有一个二维表从数据数组中获取列标题，从样本数组中获取行标题。

samples.sampletests 是跨功能对象，如果 sample.sampletests[n].testId 与表头（数据）中的 testId 匹配，则将对其进行检查。

现在我在标题中添加了全选函数 - 引入了一个对象数组状态变量testSelectAll具有testid和isselectall属性，它工作正常

为此，我引入了之前未使用的复选框的选中属性，仅使用了onChange和defaultChecked ..

问题

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

这是一个偷窥

在此处输入图像描述

我的完整运行代码在代码框 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
4

0 回答 0