Блог

Я использую компонент дерева дизайна Ant моя задача-получение данных из серверной части в этой древовидной структуре и в дочерних данных Я проверяю ключ со значением true и false, поэтому мне нужно установить флажок проверено, является ли значение проверенного ключа истинным, если оно ложно, чем не проверено, поэтому флажок будет установлен по умолчанию, если значение проверено дочерними данными, вы также можете проверить ссылку CodeSandbox ниже.

 const treeData = [
  {
    title: "First Watchlists",
    key: "First Watchlists",
    children: [
      { title: " Open Data", key: "Open Data", checked: true },
      {
        title: "Department of trade ",
        key: "Department of trade ",
        checked: true
      },
      {
        title: "sanction List",
        key: "sanction List",
        checked: true
      },
      { title: "People's Daily", key: "People's Daily", checked: true },
      {
        title: "People  trades",
        key: "People trades",
        checked: true
      }
    ]
  },
  {
    title: "Second Watchlists",
    key: "Second Watchlists",
    children: [
      {
        title: "Second Service",
        key: "Second Service",
        checked: true
      }
    ]
  },
  {
    title: "Third Watchlists",
    key: "Third Watchlists",
    children: [
      {
        title: "National ",
        key: "National ",
        checked: false
      },
      {
        title: "Militants List",
        key: "Militants List",
        checked: false
      }
    ]
  },
  {
    title: "Forth Watchlists",
    key: "Forth Watchlists",
    children: [
      { title: "FAT", key: "FAT", checked: true },
      { title: "FAC", key: "FAC", checked: false },
      { title: "SC", key: "SC", checked: false },
      {
        title: "Data Council",
        key: "Data Council",
        checked: true
      },
      {
        title: " Sanctions List",
        key: "Sanctions List",
        checked: false
      }
    ]
  }
];

const Demo = () => {
  const [expandedKeys, setExpandedKeys] = useState(["0-0-0", "0-0-1"]);
  const [checkedKeys, setCheckedKeys] = useState(["0-0-0"]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const onExpand = (expandedKeysValue) => {
    console.log("onExpand", expandedKeysValue); // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.

    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeysValue) => {
    console.log("onCheck", checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
  };

  const onSelect = (selectedKeysValue, info) => {
    console.log("onSelect", info);
    setSelectedKeys(selectedKeysValue);
  };

  return (
    <Tree
      checkable
      onExpand={onExpand}
      expandedKeys={expandedKeys}
      autoExpandParent={autoExpandParent}
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      onSelect={onSelect}
      selectedKeys={selectedKeys}
      treeData={treeData}
    />
  );
};
 

Ссылка на CodeSandbox

 const buildCheckedKeys = () => {
  const checked = [];

  treeData.forEach((data) => {
    data.children.forEach((item) => {
      if (item.checked) {
        checked.push(item.key);
      }
    });
  });

  return checked;
};



const [checkedKeys, setCheckedKeys] = useState(buildCheckedKeys);
 

Код можно найти здесь