react的antd Tree(树形组件)默认展开和选中踩坑及使用

 踩坑：开始发现不能收缩、展开。。。还以为是有bug呢。。。哎。。真TM蛋疼

1.只用expandedKeys和checkedKeys的问题   无法收缩和选中了。

2.expandedKeys 的类型也很重要，比如下面key是number类型expandedKeys也必须是数字expandedKeys=[1,2]，如果是这样xpandedKeys=["1","2"]也不会生效

总体解决方案： 必须配合下面的2个属性才能正常的展开收缩

setExpandedKeys([data[0]?.id])     setAutoExpandParent(false)

import React, { useState, useRef, useEffect } from "react"
import { Link } from "umi"
import { useLocation, useHistory } from "react-router"
import { Button, Input, message, Modal, Checkbox, TreeSelect, Tree } from "antd"
const { TreeNode } = TreeSelect
const { Search } = Input
import { LoadingOutlined, SearchOutlined } from "@ant-design/icons"
import { sysDeptTreeApi, sysDeptOut, userPopApi, userPopinPam } from "@/services/components/treeGroupMemberSearch"
import { DataNode } from "rc-tree-select/lib/interface"

import "./importCss.less"

interface IProps {
  isModalVisible: boolean, // 是否显示弹框
  setIsModalVisible: Function // 设置是否隐藏函数
  getChildParam: Function // 点击确认的 获取子组件参数
  requestAsync?: (...args: any[]) => Promise, // 可传接口

}

/**
 * 搜索组员弹框  
 * 树形版本组员搜索，
 * 左边是科室列表 右边是 医生用户列表
 * 暂时是多选的
 *  */
const treeSelectGroupMemberSearch = (props: IProps) => {
  // console.log(1111, props)

  const [loading, setLoading] = useState(false)
  const [checkArr, setCheckArr] = useState<[]>([])
  const [width, setWidth] = useState("35%") // 弹框宽度
  const [treeDataDept, setTreeDataDept] = useState() // 树形科室


  const [currentValue, setCurrentValue] = useState("") // 指定当前选中条目


  const [unfolds, setUnfolds] = useState>([])

  const [autoExpandParent, setAutoExpandParent] = useState(true)
  const [expandedKeys, setExpandedKeys] = useState>([])

  const [searchValue, setSearchValue] = useState("")

  // 点击确认
  const handleOk = () => {
    // setIsModalVisible(false)
    props.getChildParam(checkArr)
    props.setIsModalVisible(false)
  }
  // 点击取消 
  const handleCancel = () => {
    props.setIsModalVisible(false)
  }


  // 选中树节点时调用此函数
  const onSelect = (selectedKeys: React.Key[], e: any) => {
    console.log("selected", selectedKeys, e)

  }


  // Checkbox.Group  选中事件
  const onChangeCheckbox = (e: any) => {
    console.log(e)
    if (e) {
      setCheckArr(e)
    }
  }




  // 必须配合展开事件
  const onExpand = (expandedKeys: any) => {
    console.log("onExpand", expandedKeys)
    setExpandedKeys(expandedKeys)
    setAutoExpandParent(false)
  }


  // 左边视图渲染
  const LeftTreeView = () => {
    let leftcon = (
      
    )
    return leftcon
  }

  // 获取树形科室列表
  const sysDeptTreeList = async () => {
    setLoading(true)
    const [err, res] = await sysDeptTreeApi()
    // console.log(111, res.data)
    if (err) {
      setLoading(false)
      return message.error(err.message)
    }

    let data = forTreeDate(res.data)
    console.log("组合后：", data)

    setExpandedKeys([data[0]?.id]) //必须配合setAutoExpandParent
    setAutoExpandParent(false)

    setTreeDataDept(data)
    setLoading(false)
  }

  // 递归部门树形结构
  const forTreeDate = (data: sysDeptOut) => {
    data.label = data.code
    data.key = data.id
    data.title = data.name

    if (data.childDept && data.childDept.length >= 1) {
      data.children = data.childDept
      data.childDept.forEach((item: sysDeptOut) => {
        forTreeDate(item)
      })
    } else {
      data.children = []
    }
    return [data]
  }



  // 初始化
  useEffect(() => {
    sysDeptTreeList()
  }, [])

  return (
    


      
        

          
          }>
            搜索
          
        
        

          

            {/*  */}

            {LeftTreeView()}
          
          

            
              
                

                  

                    

                    

                      
 凤美芳 皮肤科 
                      
东莞厚街人民医院
                    
                  
                  

                    
                  
                
              
              
                

                  

                    

                    

                      
 凤美芳 皮肤科 
                      
东莞厚街人民医院
                    
                  
                  

                    
                  
                
              
            
          
        

      

    
  )
}

export default treeSelectGroupMemberSearch