antd checkbox 实现多组全选遍历

在这里插入图片描述

import React from 'react';
import { Checkbox, Divider } from 'antd';
import { useState } from 'react';
const CheckboxGroup = Checkbox.Group;
const defaultCheckedList = [];

export default () => {
  const [checkedList, setCheckedList] = React.useState(defaultCheckedList);
  const [test, setTest] = useState();
  const arr = [
    {
      name: 'sds',
      children: [
        { value: 'sd121s', label: 'fgfdwewew' },
        { value: 's1ds', label: 'wewghdgew' },
        { value: 's2ds', label: 'wewhfghew' },
        { value: 's23ds', label: 'wdfgfdgewew' },
      ],
      bool: false,
    },
    {
      name: 's12s',
      children: [
        { value: 'sd12s', label: 'wewerwew' },
        { value: 'sd333s', label: 'wewwerew' },
        { value: 'sd3333s', label: 'wesdfswew' },
        { value: 's4444ds', label: 'wewdsfew' },
      ],
      bool: true,
    },
    {
      name: 'sdfdsfs',
      children: [
        { value: 'sd314s', label: 'we123213wew' },
        { value: 's2321ds', label: 'wew121ew' },
        { value: 'sd2312s', label: 'wew23213ew' },
        { value: 's2132ds', label: 'we324234wew' },
      ],
      bool: false,
    },
  ];
  const onChange = (list: any, name, e) => {
    const clickBool = checkedList.some((item) => {
      console.log(item);

      return item === e.target.value;
    });

    let newList = list?.map((item) => {
      return item.value;
    });

    if (clickBool) {
      checkedList.forEach((item) => {
        if (item === e.target.value) {
          checkedList.splice(checkedList.indexOf(e.target.value), 1);
        }
      });

      setCheckedList([...checkedList]);
      setTest({ ...test, [name]: false });
    } else {
      setCheckedList([...checkedList, e.target.value]);
      let a = newList.map((item, index) => {
        return [...checkedList, e.target.value].some((it) => {
          return item === it;
        });
      });
      let b = a.every((item) => {
        return item === true;
      });

      if (b) {
        setTest({ ...test, [name]: b });
      } else {
        setTest({ ...test, [name]: b });
      }
    }
  };

  const onCheckAllChange = (value: any[], e: any) => {
    let tempArray1 = []; //临时数组1
    let tempArray2 = []; //临时数组2
    const arr2 = value.map((item: { value: any }) => {
      return item.value;
    });
    for (let i = 0; i < arr2.length; i++) {
      tempArray1[arr2[i]] = true;
    }
    for (var i = 0; i < checkedList.length; i++) {
      if (!tempArray1[checkedList[i]]) {
        tempArray2.push(checkedList[i]);
      }
    }
    setTest({ ...test, [e.target.value]: e.target.checked });
    setCheckedList(
      e.target.checked
        ? [
            ...checkedList,
            ...value.map((item: { value: any }) => {
              return item.value;
            }),
          ]
        : [...tempArray2],
    );
  };

  return (
    <>
      {arr?.map((item) => {
        return (
          <div key={item.name}>
            <Checkbox
              value={item.name}
              name={item.name}
              // indeterminate={indeterminate}
              onChange={() => {
                onCheckAllChange(item.children, event);
              }}
              checked={test?.[item?.name]}
              // checked={true}
            >
              {item.name}
            </Checkbox>
            <br />
            <CheckboxGroup
              options={item?.children.map((i) => {
                return {
                  value: i.value,
                  label: i.label,
                };
              })}
              value={checkedList}
              onChange={() => {
                onChange(item?.children, item.name, event);
              }}
            />
          </div>
        );
      })}
    </>
  );
};

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值