根據另一棵 Antd 樹的選中節點創建 Antd 樹

Question

我想創建一個只有另一個樹數據的選中節點的樹 antd 數據，請看這里圖片

當我檢查一些節點並單擊驗證時，我希望能夠從我的數據中僅過濾檢查/半檢查數據並使用新數據創建另一棵樹。 這是我的沙盒，請看一下:) https://codesandbox.io/s/modern-browser-glh4n?file=/index.js

圖像示例：當我檢查此節點並單擊驗證：圖像當我 select 節點時，我希望得到這個結果：預期結果謝謝

Answer 1

我創建了一種遞歸方法來基於選中和半選中的樹節點創建新的樹數據，實際上它用它的子樹過濾原始樹。

這是更新的代碼框：

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 事件中，我向 allChecked state 添加了 halfchecked 節點，如下所示：

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