antd Checkbox 如何套多层

目录： 1、 注意事项   2、效果图 3、代码

-------------------------------

注意事项：

关系： 

onChange={onCheckAllChange} > 

  

 

 ×2

 

 

1、   是如何控制   

答：通过 onChange={onCheckAllChange} 属性监听点击，回调函数，然后设置的

  value属性 。 

2、子  被点满后，最外层如何变为亮 

答： 通过 onchang属性监听子 是否被点满吗，如果点满，就设置最外层的   的 checked 为true

3、被包裹的，它的checked属性会失效。

4、具体看下代码，最重要是搞清楚 CheckboxGroup 是如何控制它的子 值的？ 同时，最外层 是如何控制 的？

--------------------------

效果图：

 

 

 

--------------------------

import React, { useState } from "react";
import { Checkbox, Divider } from "antd";
 
const CheckboxGroup = Checkbox.Group;
const plainOptions = ["Apple", "Pear", "Orange"];
const defaultCheckedList = ["Apple", "Orange"];
const App = () => {
  const [checkedList, setCheckedList] = useState([]);
  const [checkedList1, setCheckedList1] = useState([]);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);
  const [checkAll1, setCheckAll1] = useState(false);
  const onChange = (list) => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };
  const onChange1 = (list) => {
    setCheckedList1(list);
    // setCheckAll1(list.length === 2);
    if (list.length === 2) {
      setCheckedList(Object.assign(checkedList, ["Apple"]));
    } else {
      let removedArr = checkedList.filter((x) => x !== "Apple");
      setCheckedList(removedArr);
    }
  };
 
  const aaa = (e) => {
    console.log(e, "9999999999999");
    setCheckedList1(e.target.checked ? ["ee", "ff"] : []);
  };
 
  const onCheckAllChange = (e) => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
    setCheckedList1(e.target.checked ? ["ee", "ff"] : []);
  };
  return (
    <>
      <Checkbox
        indeterminate={indeterminate}
        onChange={onCheckAllChange}
        checked={checkAll}
      >
        最外层全选
      Checkbox>
      <Divider />
      <CheckboxGroup
        // options={plainOptions}
        value={checkedList}
        onChange={onChange}
      >
        <Checkbox value="Apple" onChange={aaa}>
          aa选项全选
        Checkbox>
 
        <CheckboxGroup
          style={{ display: "inline", margin: "5" }}
          value={checkedList1}
          onChange={onChange1}
        >
          <Checkbox value="ee">我是被aa包裹的eeCheckbox>
          <Checkbox value="ff">我是被aa包裹的ffCheckbox>
        CheckboxGroup>
 
        <Checkbox value="Pear" style={{ display: "block" }}>
          bb
        Checkbox>
        <Checkbox value="Orange">ccCheckbox>
      CheckboxGroup>
    
  );
};
export default App;