antd Tree组件选择父子key都返回后端

问题说明 

• 问题1：当子节点没有全部选择时，父节点不会被选中，而我们需要选中的子节点的父节点值也要返回给后端。
• 问题2：若checkedKeys里面有父节点，它会默认选择父节点下的所有子节点，展示会出问题，若直接把父节点给checkedKeys，点击此下的子节点将无法取消选中。

研发思路

•  onCheck e.halfCheckedKeys是可以知道未被选中的所有父节点，可以保存在allMenuId中，而选中节点可以保存在menuId中。
• 编辑时，把allMenuId的数据处理一下，处理掉没有全选中子节点的父节点后，再保存给menuId中。
•  提交给后端的数据就用allMenuId。

相关操作 

type MenuListItem = {
   id:string;
   pid:string;
   children:MenuListItem[]|null;
}

  const [menuData, setMenuData] = useState<MenuListItem[]>([]) // 树结构数据
  const [menuId, setMenuId] = useState<React.Key[]>([]); // 选中数据
  const [allMenuId, setAllMenuId] = useState<React.Key[]>([]); // 最终需要的选中数据


 
  // 获取树结构数据
  useEffect(() => {
  const getMuneList = async () => {
    const { data, success } = await handelList(menuList)
    if (success) {
      setMenuData(data)
    } else {
      setMenuData([])
    }
  }
    getMuneList()
  }, [])



  // 函数来检查一个节点及其所有子节点是否都不被选中的方法
  function areAllChildrenUnselected(node: API.MenuListItem, ids: string[]): boolean {
    if (node.children) {
      if (node.children.some(child => !ids.includes(child.id))) {
        return false;
      }
      return node.children.every(child =>areAllChildrenUnselected(child, ids));
    }
    return true;
  }

  // 函数来过滤ids数组的方法
  function filterIds(tree: API.MenuListItem[], ids: string[]) {
    const filteredIdsSet = new Set(ids);

    function traverse(node: API.MenuListItem) {
      if (filteredIdsSet.has(node.id) && !areAllChildrenUnselected(node, ids)) {
        filteredIdsSet.delete(node.id);
      }

      if (node.children) {
        node.children.forEach(child => traverse(child));
      }
    }

    tree.forEach(node => traverse(node));

    return Array.from(filteredIdsSet);
  }

  // 处理掉没有全选中子节点的父节点  currentRow来自后端返回的已选中的节点数据 string[]
  useEffect(() => {
    if (currentRow) {
      setAllMenuId(currentRow)
      if (menuId.length === 0) {
        if (menuData.length > 0) {
          const data = filterIds(menuData, currentRow)
          setMenuId(data)
        } else {
          setMenuId([])
        }
      }
    }
  }, [currentRow, menuData])


// 选择操作
const onCheck: TreeProps['onCheck'] = (data: any, e) => {
    const halfData = e.halfCheckedKeys ? [...e.halfCheckedKeys] : []
    const newData = [...data, ...halfData]
    setMenuId(data)
    setAllMenuId(newData)
 }

  

 组件使用

import { Tree } from "antd";
import type { TreeProps } from 'antd';
import { useEffect, useState } from 'react';
const TreeNode = Tree.TreeNode

// --------------------------------------------------------------------
  
const genTree = (tree: API.MenuListItem[]) => {
    return tree.map(res => {
      return <TreeNode
        title={res.name}
        key={res.id}
        value={res.id}
      >
        {res.children && genTree(res.children)}
      </TreeNode>
    })
  }



  return (
    <>
      {menuData.length > 0 ? <Tree
        blockNode
        checkable
        checkedKeys={menuId}
        onCheck={onCheck}
      >
        {genTree(menuData)}
      </Tree> : null
      }
    </>
  )