React--Tree 点击节点收缩

时间:2020-03-26
本文章向大家介绍React--Tree 点击节点收缩,主要包括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,
            });
        }
    }

$flag 上一页 下一页