关于antd树形控件点击树节点不能收缩问题

Question

// expandedKeys,selectedKeys 使用了这两个方法，发现树形结构点击不能收缩，必须要把父级目录parent 1-0下的第二个leaf点击让背景色消失才会自动收缩，这样自动收缩也是不对的，即使点击让背景色消失也不能自动收缩，直到用户点击父级parent 1-0才能收缩，这才正常，求解答

 checkedKeys = () => {
    this.setState({ checkedKey: ['0-0-0-1','0-0-1-0'] });
  }
  onSelect = (selectedKeys, info) => {
    this.setState({ checkedKey: selectedKeys });
  }
  onExpands = (selectedKeys, info) => {
    this.setState({ checkedKey: selectedKeys });
  }
  render() {
    return (
      <div>
        <Tree
          multiple={true}
          expandedKeys={this.state.checkedKey}
          selectedKeys={this.state.checkedKey}
          onSelect={this.onSelect}
          onExpand={this.onExpands}
        >
          <TreeNode title="parent 1" key="0-0">
            <TreeNode title="parent 1-0" key="0-0-0">
              <TreeNode title="leaf" key="0-0-0-0" />
              <TreeNode title="leaf" key="0-0-0-1" />
            </TreeNode>
            <TreeNode title="parent 1-1" key="0-0-1">
              <TreeNode title="sss" key="0-0-1-0" />
            </TreeNode>
          </TreeNode>
        </Tree>
        <button onClick={this.checkedKeys}>给复选框值</button>
      </div>
    );
  }

Answer 1

 onExpands = (selectedKeys, info) => {
    this.setState({ checkedKey: selectedKeys });
  }

这里写错了，checkedKey和expandKey用两个变量来存，他们是两个东西

Answer 2

你把选择与展开混淆了。
1楼回答正解！

Answer 3

  render() {
    return (
      <div>
        <Tree
          multiple={true}
          expandedKeys={this.state.expandKey || []}// （受控）展开指定的树节点
          selectedKeys={this.state.checkedKey || []}// （受控）设置选中的树节点
          onSelect={this.onSelect}// 点击树节点触发
          onExpand={this.onExpands}// 展开/收起节点时触发
        >
          <TreeNode title="parent 1" key="0-0">
            <TreeNode title="parent 1-0" key="0-0-0">
              <TreeNode title="leaf" key="0-0-0-0" />
              <TreeNode title="leaf" key="0-0-0-1" />
            </TreeNode>
            <TreeNode title="parent 1-1" key="0-0-1">
              <TreeNode title="sss" key="0-0-1-0" />
            </TreeNode>
          </TreeNode>
        </Tree>
        <button onClick={this.checkedKeys}>给复选框值</button>
      </div>
    );
  }
  checkedKeys = () => {
    this.setState({ expandKey: ['0-0-0','0-0-0-1','0-0-1-0'],checkedKey: ['0-0-0','0-0-0-1','0-0-1-0'] });
  }
  onSelect = (onSelect, info) => {
    this.setState({ checkedKey: onSelect });
  }
  onExpands = (onExpands, info) => {
    this.setState({ expandKey: onExpands });
  }

Answer 4

已解决，vue中写法

<template>
  <div>
    <a-input-search style="margin-bottom: 8px" placeholder="请选择" @change="onChange"/>
    <a-tree
      ref="treeInfo"
      v-model="value"
      @select="this.onSelect"
      :treeData="treeData"
      @expand="handleExpand"
      :expandedKeys="expandedKeys"
      :selectedKeys="checkedKey"
      :autoExpandParent="autoExpandParent"
    />
  </div>
</template>
<script>
  export default {
    data () {
      return {
        treeData: [],
        value: undefined,
        checkedKey:[],
        expandedKeys: [],
        autoExpandParent: true,
      }
    },
    watch: {
      value (value) {
        console.log(value)
        this.$emit('change', value)
      }
    },
    mounted () {
      this.$get('org/find').then((r) => {
//        JSON.parse(JSON.stringify(r.data).replace(/name/g, 'title'))    //data为数组，title为修改前，name为修改后
        this.treeData = JSON.parse(JSON.stringify(r.data).replace(/name/g, 'title').replace(/child/g, 'children').replace(/regionIndexCode/g, 'key'))
        console.log(this.treeData)
        console.log(this.getParentKey(this.treeData))

        for (let i = 0; i < this.treeData.length; i++) {
//          this.treeData[i].key = this.treeData[i].regionIndexCode// '1-'+i
          this.expandedKeys.push(this.treeData[i].key)
//          this.treeData[i] = JSON.parse(JSON.stringify(this.treeData[i]).replace(/child/g, 'children'))
//          for (let j = 0; j < this.treeData[i].children.length; j++) {
//            this.treeData[i].children[j].key = this.treeData[i].children[j].regionIndexCode//'2-'+j
////            this.expandedKeys.push(this.treeData[i].children[j].key)
//            if (this.treeData[i].children[j].children != null) {
//              for (let k = 0; k < this.treeData[i].children[j].children.length; k++) {
//                this.treeData[i].children[j].children[k].key = this.treeData[i].children[j].children[k].regionIndexCode//'3-'+k//k+ 666
////                this.expandedKeys.push(this.treeData[i].children[j].children[k].key)
//              }
//            }
//          }
        }

      })
    },
    methods: {
      handleExpand (expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onSelect (selectedKeys, info) {
        console.log(selectedKeys)
        this.checkedKey=selectedKeys
        this.value = selectedKeys
      },
      onChange (e) {
        const value = e.target.value
        this.removeColor(this.treeData)
        if (value != '') {
          this.addColor(value, this.treeData)
        }
      },
      addColor (value, treeData) {
        var titleArr = document.getElementsByClassName('ant-tree-title')
        for (var i = 0; i < titleArr.length; i++) {
          if (titleArr[i].innerHTML.indexOf(value) > -1 && value != '') {
            titleArr[i].style.color = 'red'
          }
        }
      },
      removeColor (treeData) {
        var titleArr = document.getElementsByClassName('ant-tree-title')
        for (var i = 0; i < titleArr.length; i++) {
          titleArr[i].style.color = ''
        }
      },
      //----------------------
//      generateList (data) {
//        for (let i = 0; i < data.length; i++) {
//          const node = data[i]
//          const key = node.key
//          this.dataList.push({key, title: node.title})
//
//          if (node.children) {
//            this.generateList(node.children, node.key)
//          }
//        }
//      },
      getParentKey (tree) {
//        let parentKey
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i]
          if (node.children) {
            node.children[i].key=node.children[i].regionIndexCode
//            if (node.children.some(item => item.key === key)) {
//              parentKey = node.key
//            } else if (this.getParentKey(key, node.children)) {
//              parentKey = this.getParentKey(key, node.children)
//            }
          }
        }
        return tree
      },
      //----------------------
//      handleExpand (expandedKeys) {
//        this.expandedKeys = expandedKeys
//        // this.autoExpandParent = false
//      },
//      onSelect (selectedKeys, info) {
//        console.log('selected', selectedKeys, info)
//        this.value = selectedKeys
//      },
    },
  }
</script>
<style scoped>
  .hidden {
    width: 150px;
    height: 20px;
    display: block;
    background: pink;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block;
  }
</style>