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<any>, // 可传接口

}

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

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


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


  const [unfolds, setUnfolds] = useState<Array<any>>([])

  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true)
  const [expandedKeys, setExpandedKeys] = useState<Array<any>>([])

  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 = (
      <Tree
        expandedKeys={expandedKeys}
        onExpand={onExpand}
        autoExpandParent={autoExpandParent}

        onSelect={onSelect}
        treeData={treeDataDept}
      />
    )
    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 (
    <div className="treeSelectGroupMemberSearch-Wrap">

      <Modal wrapClassName="treeSelectGroupMemberSearch" closable={false} title="" centered width={width} visible={props.isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <div className="treeSelectGroupMemberSearch-top" >
          <Input style={{ height: "28px" }} placeholder="请输入姓名或科室" />
          <Button style={{ height: "28px", marginLeft: "10px" }} size="small" type="primary" icon={<SearchOutlined />}>
            搜索
          </Button>
        </div>
        <div className="treeSelectGroupMemberSearch-wrap">
          <div className="leftTree">
            {/* <LeftTreeView /> */}

            {LeftTreeView()}
          </div>
          <div className="rightUser">
            <Checkbox.Group style={{ width: "100%" }} onChange={onChangeCheckbox} >
              <label>
                <div className="treeSelectGroupMemberSearch-itemWrap">
                  <div className="treeSelectGroupMemberSearch-itemLeft">
                    <div><img className="img" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802047654,2148216876&fm=26&gp=0.jpg" /></div>
                    <div className="treeSelectGroupMemberSearch-spanWrap">
                      <div> <span className="treeSelectGroupMemberSearch-span1" >凤美芳</span> <span className="treeSelectGroupMemberSearch-span2" >皮肤科</span> </div>
                      <div className="treeSelectGroupMemberSearch-span3" >东莞厚街人民医院</div>
                    </div>
                  </div>
                  <div>
                    <Checkbox value="4545" />
                  </div>
                </div>
              </label>
              <label>
                <div className="treeSelectGroupMemberSearch-itemWrap">
                  <div className="treeSelectGroupMemberSearch-itemLeft">
                    <div><img className="img" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802047654,2148216876&fm=26&gp=0.jpg" /></div>
                    <div className="treeSelectGroupMemberSearch-spanWrap">
                      <div> <span className="treeSelectGroupMemberSearch-span1" >凤美芳</span> <span className="treeSelectGroupMemberSearch-span2" >皮肤科</span> </div>
                      <div className="treeSelectGroupMemberSearch-span3" >东莞厚街人民医院</div>
                    </div>
                  </div>
                  <div>
                    <Checkbox value="4545" />
                  </div>
                </div>
              </label>
            </Checkbox.Group>
          </div>
        </div>

      </Modal>

    </div >
  )
}

export default treeSelectGroupMemberSearch