根据另一个 Antd Tree 的 checked Node 创建 Antd Tree

Question

我想创建一个只有另一个树数据的检查节点的树antd数据，请看这里image

当我检查一些节点并单击验证时，我希望能够仅从我的数据中过滤 checked/half 检查的数据并使用新数据创建另一个树。这是我的沙箱，请看一下:) https://codesandbox.io/s/modern-browser-glh4n?file=/index.js

图像示例：当我检查此节点并单击验证时：image when I select nodes , I expect to get this result : expected result 谢谢

Answer 1

我创建了一个递归方法来根据已检查和半检查的树节点创建新的树数据，实际上它用它的子树过滤原始树。

这是更新后的 codesandbox :

const createNewTreeData = (treeData, checkedKeys) => {
  return treeData.reduce((acc, treeDataItem) => {
    if (checkedKeys.includes(treeDataItem.key)) {
      if (treeDataItem.children) {
        acc.push({
          ...treeDataItem,
          children: createNewTreeData(treeDataItem.children, checkedKeys)
        });
      } else {
        acc.push(treeDataItem);
      }
    }

    return acc;
  }, []);
};

并且在 onCheck 事件中，我将 halfchecked 节点添加到 allChecked 状态，如下所示：

onCheck = (checkedKeys, e) => {
    const allCheckedKeys = [...checkedKeys, ...e.halfCheckedKeys];
    this.setState((prevState) => ({
      ...prevState,
      allCheckedKeys,
      checkedKeys
    }));
};

根据另一个 Antd Tree 的 checked Node 创建 Antd Tree

Create Antd Tree based on checked Node of another Antd Tree

javascript

arrays

reactjs

antd