React--Tree 点击节点收缩

Posted 2021-03-03 jjiaper

需求 项目使用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数组来进行展开和收缩的处理。但是他们两个方法接受到的值不同，这个时候就写点逻辑判断一下就行了，都能看同。