antd design 树的动态新增 修改 删除

1. antd deisgn tree 动态新增功能:

 <Tree
                 showLine
                 onExpand={this.onExpand.bind(this,this.state.flags)}
                 expandedKeys={this.state.expandedKeys}
                 autoExpandParent={this.state.autoExpandParent}                                       
                 loadData={this.onLoadData}   
                 onSelect={this.onSelect}
           >
                   {this.renderTreeNodes(this.state.treeData,this.state.delData,this.state.dataFlag)}
    </Tree>

//选中节点时触发
 onSelect = (selectedKeys, info) => {
            if(info.node.props.dataRef.ceResClass===1)
            {
                this.setState({
                    userId:info.node.props.dataRef.key,
                    ceResClass:info.node.props.dataRef.ceResClass,
                    energyClass:'',
                    selectedKeys,
                    //partId:'',
                    // cntrId:'',
                    // deviceId:'',
                    // energyId:'',
                    treeNode:info, ---->点击选中之后 获取到当前节点的数据 保存到 state里面 
                },()=>{
                  //  this.getUserDetailInfoById(info.node.props.dataRef.key);
                    //this.getLowerClass(info.node.props.dataRef.ceResClass,"CE_CUST");
                })
            }
   }
   //加载树
   onLoadData = treeNode => new Promise((resolve) => {
        console.log("treeNode",treeNode)
        if(treeNode.props.dataRef.ceResClass===5)
        {
            resolve();
            return;
        }
        reqwest({
            url: '/xxxx/xxxx/recesInfo',
            method: 'GET',
            credentials: 'include',
            data: {
                id: treeNode.props.dataRef.key,
                ceResClass: treeNode.props.dataRef.ceResClass
            }
        }).then((data) => {
            var ds = eval('(' + data + ')');
            this.setState({
                treeData1: ds[0].result,
            }, () => {
                console.log("ttreeData321ggg", this.state.treeData1)
            })
        })
           // console.log("ttreeData321",this.state.treeData)
           //
            setTimeout(() => {
                console.log("ttreeData321",treeNode)
                treeNode.props.dataRef.children = this.state.treeData1
                //treeNode.isLeaf=false;
                //console.log("treeNode.props.dataRef.children",treeNode.props.dataRef.children)
                if(treeNode.props.dataRef.ceResClass===1){
                    this.setState({
                        treeData: [...this.state.treeData],
                        userId: treeNode.props.dataRef.key
                    },()=>{
                        console.log("treeData",this.state.treeData)
                    });

                }else if(treeNode.props.dataRef.ceResClass===2){
                    this.setState({
                        treeData: [...this.state.treeData],
                        partId:treeNode.props.dataRef.key
                    },()=>{
                        console.log("treeData",this.state.partId)
                    });
                }else if(treeNode.props.dataRef.ceResClass===3){
                    console.log("treeNode3")
                    this.setState({
                        treeData: [...this.state.treeData],
                        cntrId: treeNode.props.dataRef.key
                    },()=>{
                        console.log("treeNode3",this.state.treeData)
                    });
                }else if(treeNode.props.dataRef.ceResClass===4){
                    this.setState({
                        treeData: [...this.state.treeData],
                        deviceId: treeNode.props.dataRef.key
                    });
                }else if(treeNode.props.dataRef.ceResClass===0){
                    this.setState({
                        treeData: [...this.state.treeData],
                    });
                }

                resolve();
            }, 1000);

     //渲染树节点调用
      renderTreeNodes =(data,delData,dataFlag)=>data.map((item,i) => {
       // console.log("renderTree",item)
            console.log('树形菜单数据源567', delData);
            console.log('树形菜单数据源', i);
            console.log('树形菜单数据源98', item.key);
            if(delData!=="0") {
                if (dataFlag === "1") {  ---》说明是删除  
                   //如果循环的节点数据中有跟你传过来要删的数据delData.key相同的 那就将这条数据丛树节点删掉
                    if (item.key === delData.key) {  

                        console.log("sadas", delData);
                        data.splice(i, 1);  ----->数组删除方法 
                        this.setState({
                            delData: '0',
                            dataFlag:'0'
                        })
                        ///console.log("sadas",delData.key);
                        console.log('树形菜单数据源13', i);
                    }
                } else if (dataFlag === "2") { -----》说明是修改 
                    if (item.key === delData.key) {
                      //如果循环的树节点数据中有跟你传过来要修改的数据delData.key相同的 那就将这条数据的title 变成你修改的title
                        console.log("data[i].title", data[i].title)
                        item.title = delData.title;
                        data[i].title = delData.title;
                        this.setState({
                            delData: '0',
                            dataFlag:'0'

                        })
                    }
                }
            }
                if (!item.children) {
                  //  console.log("no")
                    return (
                        <TreeNode title={item.title} key={item.key} dataRef={item}/>
                    )
                } else {
                    console.log("yes")

                    return (
                        <TreeNode title={item.title} key={item.key} dataRef={item}>
                            {this.renderTreeNodes(item.children,this.state.delData,this.state.dataFlag)}
                        </TreeNode>
                    );
                }
               return <TreeNode {...item} dataRef={item} />;
    })
1. 新增一个树节点之后 我会调用这个方法 查询出最近一条新增的数据，将此条数据push 到当前节点的children 下 这样就动态添加了一个子节点
 getUserByOrg=()=>{
        const{treeNode}=this.state;
        reqwest({
            url: '/xxx/xxx/maxRecesInfo',
            method: 'GET',
            credentials: 'include',
            data:{
                id: treeNode.node.props.dataRef.key,
                ceResClass:treeNode.node.props.dataRef.ceResClass
            }
        }).then((data)=>{
            var ds=eval('('+data+')');
            console.log("dsa",ds[0])
            console.log("dsa",ds)
            this.setState({
                maxInfo:ds[0],
            },()=>{
                setTimeout(() => {

                    treeNode.node.props.dataRef.children.push(this.state.maxInfo);
                    this.setState({
                        treeData: [...this.state.treeData],
                        // userId: treeNode.props.dataRef.key
                    });
                    //resolve();
                }, 1000);
            })
        })
2  修改树节点 时  我是修改节点的title  让title（名字动态改变） 
 moEnergyComfirm=()=>{
        const{ceResName,ceResNo,isSettl,treeNode,energyType,ceResClass,energyId,version}=this.state；
        reqwest({
            url:'/xxx/xxx/modifyEnergy',
            method: 'GET',
            credentials: 'include',
            data: {
                energyId:energyId,
                ceResNo: ceResNo,
                ceResName: encodeURI(ceResName),
                isSettl:isSettl,
                energyType: energyType,
                ceResClass:ceResClass,
                version:version,
            }
        }).then((data)=> {
            if(data.status===0){
                message.success(data.message);
                treeNode.node.props.dataRef.title=ceResName; --->修改成功后 将修改的名字重新赋值给当前节点的title 
                this.setState({
                    ceResNo: '',
                    ceResName: '',
                    enerFlag:'',
                    operFlag:'',
                    isSettl:'1',
                    energyType: '1',
                    modifyOrViewFlag:'2',
                    readOnlys:false,
                    delData:treeNode.node.props.dataRef,-----动态修改节点title时 要修改的节点的值
                    dataFlag:'2'   ------》dataFlag 等于2 代表修改              
                },()=>{              
                    this.renderTreeNodes(this.state.treeData,this.state.delData,this.state.dataFlag);     ----》调用此方法动态修改          
                })
            }else if(data.status===2){
                message.error(data.message);
            }else{
                message.error(data.message);
            }
        })
    }
  3删除树节点  
  deleteUser=()=>{
        const{treeNode}=this.state;
        const{userId}=this.state;
        reqwest({
            url:'/xxxx/xxxx/deleteUserById',
            method:'GET',
            credentials:'include',
            data:{
                userId:userId
            }
        }).then((data)=>{
            var ds=eval('('+data+')');
            if(ds.result)
            {
                this.setState({
                    delData:treeNode.node.props.dataRef,
                    dataFlag:'1'
                },()=>{
                    this.renderTreeNodes(this.state.treeData,this.state.delData,this.state.dataFlag);
                })
                message.success("删除成功");
            }else{
                message.error("删除失败");
            }
        })
    }

以上的代码希望能够帮到你 江湖路远，不懂留言！