我想设置复选框以检查值是否为真

Question

我正在使用 Ant 设计树组件我的任务是从该树结构中的后端获取数据，并且在子数据中我正在使用值 true 和 false 进行键检查，因此我需要设置检查是否已检查键值为真，如果为假而不是未选中，因此如果子数据检查值为真，则默认情况下会选中复选框，您也可以检查下面的代码沙盒链接。

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 Link

Answer 1

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);

代码可以找到here