React--Tree 点击节点收缩

Posted jjiaper

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React--Tree 点击节点收缩相关的知识,希望对你有一定的参考价值。

需求 项目使用ant-design +react 做的前端,有天来了个需求来说,展示地区的树点击节点也得能展开收缩子节点;

技术图片
react 的树组件中有点击左边的小三角号收缩的,但是不支持点击右边的节点收缩
所以得自己实现了。(可能是我没找到支持的办法)

代码

dom:

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

此中可以看出,要想实现所说功能,只能从onSelect这个地方下手,但是还要和onExpand 这个自带的收缩的方法联动,即点击三角号展开后,点击右侧节点,知道此节点的子节点已经展开,应当做关闭操作。

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,
            });
        }
    }

原理: onselect 和 onexpand 作为回调函数 被调用的时候可以接收到当前的节点的id或者是id数组,这两个通过操作id数组来进行展开和收缩的处理。但是他们两个方法接受到的值不同,这个时候就写点逻辑判断一下就行了,都能看同。

以上是关于React--Tree 点击节点收缩的主要内容,如果未能解决你的问题,请参考以下文章

ASP中关于TreeView控件的问题,怎样展开、收缩所有子节点?

关于c#中treeview节点的收缩与展开(.net web)

treeview 如何展开选中的节点,其它节点收缩。

如何实现echarts组织结构图节点的收缩

Redis Cluster集群收缩主从节点详细教程

Redis Cluster集群收缩主从节点 #yyds干货盘点#