React - Tree click the node shrink

Demand for project using the front ant-design + react to do, one day came a demand, the show click on the tree node regions have to be able to expand the contraction child nodes;

tree component react in there click on the small triangle to the left of the number of contractions, but does not support node on the right shrink
so have their own reality. (I probably could not find a way to support)

Code

judgment:

<Tree
 onExpand={this.onExpand}//展开的触发方法（点击左侧三角号触发的方法）
 expandedKeys={expandedKeys}//展开的数组
 autoExpandParent={autoExpandParent}//布尔值
 onSelect={this.onSelectTree}//选择的时候触发方法（即点击节点的时候的触发方法）
>

Among them can be seen, in order to achieve the said function, only from the onSelectstart of this place, but also, and onExpandthis comes with the contraction of the linkage method, that is, click on the triangle symbol to expand, click on the right node, this node knows the Son node has commenced and should do to close the operation.

js

state = {
 expandedKeys: [],
 temkeys: [],
 searchValue: '',
 autoExpandParent: true,
 selectedItem: {},
};

onExpand = expandedKeys => {
        console.log(expandedKeys)
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    };

onSelectTree = (selectedKeys, info) => {
        let flag = info.event && info.selectedNodes.length === 1 && !info.selectedNodes[0].props.children;
        // 没有 children 代表当前已没有下一级目录
        if (!flag) {
            if (info.selected) {
               this.changekeys(info,selectedKeys[0])
            } else {
                this.changekeys(info,info.node.props.eventKey)
            }
        }

        const {onEditItem, form: {getFieldDecorator, validateFields, getFieldsValue, setFieldsValue}} = this.props
        let treeList = this.props.data.list
        if (!isEmpty(treeList)) {
            for (let index = 0; index < treeList.length; index++) {
                if (selectedKeys[0] == treeList[index].id + '') {
                    this.setState({selectedItem: treeList[index]}, () => {
                        setFieldsValue({parentId: this.state.selectedItem.parentId});
                        setFieldsValue({name: this.state.selectedItem.name});
                    })
                }
            }
        }
    }

    changekeys = (info,currentKey)=>{
        let {temkeys} = this.state

        if (info.node.props.expanded) {
            //这个时候要把自身去掉
            temkeys = temkeys.filter(item => {
                if (item != currentKey) {
                    return true;
                }
            })
            for (let i = 0; i < temkeys.length; i++) {
                if (temkeys[i] === undefined) {
                    arr1.splice(i, 1)
                    // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位
                    i = i - 1  
                }
            }
            let expandedKeys = temkeys
            this.setState({
                temkeys,
                expandedKeys,
                autoExpandParent: false,
            });
        } else {
            //加上自身
            temkeys.push(info.node.props.eventKey);
            let expandedKeys = temkeys
            this.setState({
                temkeys,
                expandedKeys,
                autoExpandParent: false,
            });
        }
    }

Principle: onselect onexpand and may receive a callback function is called as a time to the array of the current id id or node, to process both expand and contract by the operation id array. But they are two different methods of value received, this time to write logical judgment on the line, you can look the same.