react+antd树形搜索

刚上antd的那个搜索树形结构 是真的坑.... 做个笔记先

根据业务需求实现出的效果是酱紫的

后端返回的数据结构是这样的！~

res.data:{

      arr1:[

        {

         area_id:区域id,

         name:区域名称,

         city:[

                   {id:**,name:***,erp_id:***，uni:xxx}

                    ........

                 ]

        }]

       arr2:[{erp_id:**,id:**,name:***,uni:xxx} ]

}

arr1这个数组返回的是所有结果数据 有区的信息 区下面的成员的信息

arr2这个数组返回的是已添加成员的列表（默认值嘛）上图的第二个列表中的那个数据

emmmmm...接口返回的数据真是不美丽啊...

①页面渲染：

render(){
    const data = this.state.meberList
    const {expandedKeys, autoExpandParent, gData} = this.state;
    this.generateList(this.state.gData);
    return(
        this.state.menberloding === false ?
        

            

                this.onChange(e)}
                    style={{ marginBottom: 8,width:'80%' }}
                />

                
                    {this.loop(gData)}     
                

            

            

                
已添加成员
                

                    {
                        this.renderList()
                    }
                

                

                    this.props.onCancel()}>取消
                    this.saveMember()}>确认
                
            

        
 :
            

                
            
    )
}

②方法定义

loop = data => data.map((item,indexs) => {
    let {searchValue} = this.state;
    const index = item.title.indexOf(searchValue);
    const beforeStr = item.title.substr(0, index);
    const afterStr = item.title.substr(index + searchValue.length);

    const title = index > -1 ? (
        
            {beforeStr}
            {searchValue}
            {afterStr}
        
    ) : {item.title}  ;
    if (item.children) {
        return (
            

                {this.loop(item.children)}
            
        );
    }
    return this.addmenber(item.key)}
                   >
                       {title}
                       
                           {item.email}
                       
                       
                           
                         
                   
               } 
           />;
});

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

generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const key = node.key;
        dataList.push({key, title: node.title});
        if (node.children) {
            this.generateList(node.children);
        }
    }
};

onChange = (e) => {
    const value = e.target.value;
    if (value !== '') {
        const expandedKeys = dataList.map((item) => {
            if (item.title.indexOf(value) > -1) {
                return this.getParentKey(item.title, this.state.gData);
            }
            return null;
        });
        this.setState({
            expandedKeys,
            searchValue: value,
            autoExpandParent: true,
        });
    }else{
        this.setState({
            searchValue: -1,
            autoExpandParent: false,
        });
    }
};

getParentKey = (title, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
            if (node.children.some(item => item.title === title)) {
                parentKey = node.key;
            } else if (this.getParentKey(title, node.children)) {
                parentKey = this.getParentKey(title, node.children);
            }
        }
    }
    return parentKey;
};

renderList=()=>{
    return (
        

            {
                this.state.meberList.all_member_list.map((items,indexs)=>{
                    return this.state.erpId.map((item,index)=>{
                        let getItem = items.member_list.find(value=>value.uni === item);
                        return getItem && (
                            

                                
{getItem.name}
                                
{getItem.email}
                                this.removeId(index)}>
                            
                        )
                    })
                })
            }
        

    )
}

//删除已添加成员
removeId=(index)=>{
    let erpID = this.state.erpId[index];

    this.state.gData.map((items,indexs)=>{
        const queryVal  = items.children.find(value=>value.key === erpID);
        queryVal ? queryVal.isShowIcon ='none' :''
    })

    delete this.state.erpId[index];
    this.setState({
        erpId:this.state.erpId
    })
};

//确认提交
saveMember=()=>{
    let member =[];
    let newMember=[];
    this.state.erpId.map(item=>{
        return this.state.meberList.all_member_list.map((items,indexs)=>{
            let getItem = items.member_list.find(value=>value.uni === item)
            return getItem &&  member.push(getItem)
        })
    });

    if(member.length>0){
        for(let i=0,l=member.length;i{
            if(res.code === 0){
                this.props.onCancel();
                this.props.getCallList(false,1);
            }else{
                message.error(res.message);
            }
        })
    }else{
        message.error('添加的成员不能为空');
    }
};

③state定义

state={
    expandedKeys: ['1'],  //搜索时查找到的城市key
    searchValue: '',      
    autoExpandParent: false,
    menberloding:true,
    meberList:[],
    already_member_list:[],
    dataList:[],
    erpId:[],
    queryId:[],
    gData: [],
}

④页面首次渲染时，组合gData

componentDidMount(){
    this.props.getAllOrganMember({id:this.props.memberRec.id}).then(res=>{
        if(res.code===0){
            let editArr =[];

            this.setState({
                menberloding:false,  //点击确定时的loading icon显示与否
                meberList:res.data,  
                already_member_list:res.data.already_member_list,
            });
            res.data.already_member_list.map(item=>{
                this.state.erpId.push(item.uni)   //放已添加成员列表数据（唯一标识）添加时与此做判断
            });
            //组合一下gDATA[]
            res.data.all_member_list.map((items,indexs)=>{
                let children = [];
                items.member_list.map(item => {
                    let ishow = this.state.erpId.find(value=>value === item.uni );
                    children.push({
                        title:item.name,
                        key: item.uni,
                        email:item.email,
                        isShowIcon: ishow ? 'block'  : 'none'  //添加成员名称时的icon显示与否（自己随便造的假数据）
                    })
                });
                editArr.push({
                    title:items.area_name,
                    key:items.area_id,
                    children
                })
            });
            this.setState({
                gData:editArr
            })
        }
    })
}