React下拉列表实现主项勾选全选子项、子项全选勾选主项的方法

要实现你需要的两个联动逻辑，只需修改主部门的勾选状态判断逻辑，并更新handleCheck函数处理联动逻辑，具体修改如下：

完整修改后的组件代码 #

const DropDownList = ({ data }) => {
  const [open, setOpen] = useState({});
  const [checked, setChecked] = useState({});

  const handleClick = (department) => {
    setOpen((prevOpen) => ({
      ...prevOpen,
      [department]: !prevOpen[department],
    }));
  };

  const handleCheck = (item) => {
    setChecked((prevChecked) => {
      // 切换当前点击项的勾选状态
      const newChecked = { ...prevChecked, [item]: !prevChecked[item] };

      // 判断当前点击的是主部门还是子部门
      const mainDept = data.find(dept => dept.department === item);
      if (mainDept) {
        // 点击主部门：同步所有子部门的勾选状态
        mainDept.sub_departments.forEach(sub => {
          newChecked[sub] = newChecked[item];
        });
      } else {
        // 点击子部门：找到对应的主部门
        const parentDept = data.find(dept => dept.sub_departments.includes(item));
        if (parentDept) {
          // 检查该主部门下所有子部门是否都已勾选
          const allSubsChecked = parentDept.sub_departments.every(sub => newChecked[sub]);
          // 自动更新主部门的勾选状态
          newChecked[parentDept.department] = allSubsChecked;
        }
      }

      return newChecked;
    });
  };

  return (
    <List>
      {data.map((department) => (
        <React.Fragment key={department.department}>
          <ListItem
            sx={{ cursor: "pointer" }}
            onClick={() => handleClick(department.department)}
          >
            <Checkbox
              // 主部门勾选状态：手动勾选 或 所有子部门全选 时显示勾选
              checked={checked[department.department] || department.sub_departments.every(sub => checked[sub]) || false}
              onChange={() => handleCheck(department.department)}
            />
            <ListItemText primary={department.department} />
            {open[department.department] ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          <Collapse in={open[department.department]} unmountOnExit>
            <List
              component="div"
              sx={{ padding: "0 35px", cursor: "pointer" }}
              disablePadding
            >
              {department.sub_departments.map((subDepartment) => (
                <ListItem key={subDepartment}>
                  <Checkbox
                    checked={checked[subDepartment] || false}
                    onChange={() => handleCheck(subDepartment)}
                  />
                  <ListItemText primary={subDepartment} />
                </ListItem>
              ))}
            </List>
          </Collapse>
        </React.Fragment>
      ))}
    </List>
  );
};

export default DropDownList;

关键逻辑说明 #

• 主部门联动子部门：点击主部门复选框时，会遍历该主部门下所有子部门，将它们的勾选状态同步为主部门的当前状态（勾选则全选子部门，取消则全取消子部门）。
• 子部门全选联动主部门：主部门的复选框状态同时判断两个条件：一是用户是否手动勾选主部门，二是该主部门下所有子部门是否都已勾选。只要满足任一条件，主部门就显示为勾选状态；当子部门全部被勾选时，主部门自动勾选；当有任意子部门取消勾选时，主部门的自动勾选状态同步取消。

内容的提问来源于stack exchange，提问作者Krishang Sharma