当用户想要“检查全部”时，如何在 React.js 中实现？

Question

如何在此代码中实现“检查全部”功能？我尝试了多种方法，但都没有成功。

这是复选框的位置

         <div style={{ marginTop: 33 }}>
            {Object.keys(permissionList).map((sectionKey, index) => (
              <Collapsible
                title={permissionList[sectionKey][0]?.section}
                isFirst={index === 0}
                key={sectionKey}
              >
                {permissionList[sectionKey]?.map((item, index) => (
                  <Checkbox.Group
                    options={[
                      {
                        label: item.name.toLowerCase(),
                        value: item.name.toLowerCase(),
                      },
                    ]}
                    disabled={isViewItem}
                    className="checkbox-style"
                    key={index}
                    value={formData?.permissions
                      .filter(
                        per =>
                          per.section.toLowerCase() ===
                          item.section.toLowerCase()
                      )
                      .flatMap(per => per.name.toLowerCase())}
                    onChange={checkedValues =>
                      handleCheckboxChange(
                        item.permissionId,
                        item.section.toLowerCase(),
                        checkedValues
                      )
                    }
                  />
                ))}
                <Checkbox.Group
                  options={[
                    {
                      label: "check all",
                      value: permissionList[sectionKey][0]?.section,
                    },
                  ]}
                  disabled={isViewItem}
                  className="checkbox-style"
                  key={index}
                  // value={formData?.permissions
                  //   .filter(
                  //     per =>
                  //       per.section.toLowerCase() === item.section.toLowerCase()
                  //   )
                  //   .flatMap(per => per.name.toLowerCase())}
                  onChange={checkedValues =>
                    handleCheckAll(permissionList[sectionKey], checkedValues)
                  }
                />
              </Collapsible>
            ))}
          </div>

这是复选框功能

  const handleCheckboxChange = (
    permissionId: number,
    section: string,
    checkedValues: CheckboxValueType[]
  ) => {
    console.log(permissionId, section, checkedValues);
    setFormData(prevFormData => {
      const updatedFormData = { ...prevFormData };

      const permissionIndex = updatedFormData.permissions.findIndex(
        per =>
          per.permissionId === permissionId &&
          per.section.toLowerCase() === section.toLowerCase()
      );

      if (checkedValues.length > 0) {
        if (permissionIndex !== -1) {
          updatedFormData.permissions = updatedFormData.permissions.map(
            (permission, index) => {
              if (index === permissionIndex) {
                return {
                  ...permission,
                  name: String(checkedValues[0]),
                };
              }
              return permission;
            }
          );
        } else {
          updatedFormData.permissions = [
            ...updatedFormData.permissions,
            {
              permissionId,
              section,
              name: String(checkedValues[0]),
            },
          ];
        }
      } else {
        if (permissionIndex !== -1) {
          updatedFormData.permissions = updatedFormData.permissions.filter(
            (___, index) => index !== permissionIndex
          );
        }
      }
      return updatedFormData;
    });
  };

这是handleCheckAll函数

  const handleCheckAll = (permissionsData, value) => {
    console.log(permissionsData, value);
  };

这是我存放物品的地方

  const [formData, setFormData] = useState<RoleFormData>({
    name: "",
    permissions: [],
  });

其界面：

interface Permission {
  name: string;
  section: string;
  permissionId: number;
}
interface RoleFormData {
  name: string;
  permissions: Permission[];
}

这就是我从选中所有框获取数据的方式

[{…}, {…}, {…}, {…}] 0: {permissionId: 1, name: '添加', 部分: '角色'}1: {permissionId: 2, name: '查看',部分：'角色'}2：{permissionId：3，名称：'编辑'，部分：'角色'}3：{permissionId：4，名称：'删除'，部分：'角色'}

截面--类型 [‘角色’]

权限列表如下所示

Answer 1

这是一个通用示例，说明我如何处理类似的事情（我不知道您正在使用哪个组件库，因此很难复制，并且我不会打扰复制粘贴权限您发布的图像 - 这就是我们要求代码作为文本而不是图像的原因。

这个想法是，您将有一个简单的处理函数，它接受一组权限 ID，并相应地影响状态。 （这也适用于您的

RoleFormData

，只需进行一些小的、简单的更改。）

然后，另一个组件负责呈现单个部分的权限，并找出要传递给该处理函数的权限 ID 列表。 （检查/取消检查单个权限只需传递单个权限 ID 的列表即可。）

👉 在 这个 CodeSandbox 中观看直播。

interface Permission {
  name: string;
  section: string;
  permissionId: number;
}

const permissions: Permission[] = [
  { permissionId: 1, name: "Add", section: "Role" },
  { permissionId: 2, name: "View", section: "Role" },
  { permissionId: 3, name: "Edit", section: "Role" },
  { permissionId: 4, name: "Delete", section: "Role" },
  { permissionId: 5, name: "Feed", section: "Kitten" },
  { permissionId: 6, name: "Pet", section: "Kitten" }
];

function SectionDisplay({
  allPermissions,
  section,
  updateSelections,
  selectedIds
}: {
  allPermissions: Permission[];
  section: string;
  updateSelections: (state: boolean, permissionIds: number[]) => void;
  selectedIds: Set<number>;
}) {
  const permissions = allPermissions.filter((p) => p.section === section);
  const ids = permissions.map((p) => p.permissionId);
  return (
    <div key={section}>
      <h1>{section}</h1>
      <button onClick={() => updateSelections(true, ids)}>Select All</button>
      <button onClick={() => updateSelections(false, ids)}>Select None</button>
      {permissions
        .filter((p) => p.section === section)
        .map((perm) => (
          <div key={perm.permissionId}>
            <label>
              <input
                type="checkbox"
                checked={selectedIds.has(perm.permissionId)}
                onChange={(e) =>
                  updateSelections(e.target.checked, [perm.permissionId])
                }
              />
              {perm.name}
            </label>
          </div>
        ))}
    </div>
  );
}

export default function App() {
  const sections = [...new Set(permissions.map((p) => p.section))];
  const [selectedIds, setSelectedIds] = React.useState<Set<number>>(
    () => new Set()
  );
  const selectedPermissions = permissions.filter((p) =>
    selectedIds.has(p.permissionId)
  );
  const updateSelections = (flag: boolean, ids: number[]) => {
    setSelectedIds((selectedIds) => {
      return new Set(
        flag
          ? [...selectedIds, ...ids]
          : [...selectedIds].filter((id) => !ids.includes(id))
      );
    });
  };
  return (
    <div className="App">
      {sections.map((section) => (
        <SectionDisplay
          allPermissions={permissions}
          section={section}
          key={section}
          updateSelections={updateSelections}
          selectedIds={selectedIds}
        />
      ))}
      <hr />
      Selected permissions:
      <pre>{JSON.stringify(selectedPermissions, null, 2)}</pre>
    </div>
  );
}