antd design Menu菜单下拉回调以及下拉列表时只能显示一个列表，其余关闭

最新推荐文章于 2024-07-15 17:50:58 发布

qq_28621299

最新推荐文章于 2024-07-15 17:50:58 发布

阅读量6.4k

点赞数

文章标签： React学习

本文链接：https://blog.csdn.net/qq_28621299/article/details/82428200

版权

我做的是一个显示全国省市区的下拉列表：如下图
这里写图片描述
这个下拉列表是三层嵌套的下拉列表，统计列表不能同时打开，一次只能点开一个。点击下拉时触发函数获得下一层级的下拉数据。
代码如下：

  render（）{
let city=this.state.cityList.map(itemss=>(
             <SubMenu
                 key={itemss.id}
                 title={<span ><Icon type="team" /><span className="nav-text">{itemss.name}</span></span>}
                 onTitleClick={this.getCountryList.bind(this,itemss.id,itemss.name)}
             >
                 {
                     this.state.countryList.map(citem=>(
                        <Menu.Item key={citem.id}> <span onClick={this.checkedItem.bind(this,citem.id,citem.name)} >{citem.name}</span></Menu.Item>
                     ))
                 }
             </SubMenu>

         ));
        const { startValue, endValue, endOpen } = this.state;
        return(
            <div className="div-body">
                <div className="div-page">
                    <div className="div_query ">
                        <Layout>
                                <div className="" />
                            <Sider
                                collapsed={this.state.collapsed}
                                style={{backgroundColor:'#FFFFFF'}}
                                className=""
                                onCollapse={this.onCollapse}
                                openKeys={this.state.openKeys}--->根据this.state.openKeys的值去对应SubMenu的key值 从而展开此列表。
                            >
                                 <Menu theme="" mode={this.state.mode}
                                       defaultSelectedKeys={['6']}
                                       openKeys={this.state.openKeys}
                                 >
                                   <SubMenu
                                        key="全国"
                                        title={<span><Icon type="user" /><span className="nav-text">全国</span></span>}
                                        onTitleClick={this.getProvinceList}
                                    >
                                        {
                                            this.state.provinceList.map((items,i)=>

                                                 <SubMenu
                                                    key={items.id}
                                                    title={<span ><Icon type="team" /><span className="nav-text">{items.name}</span></span>}
                                                    onTitleClick={this.getCity.bind(this,items.id,items.name,0)}--->onTitleClick---》点击触发回调函数
                                                 >
                                                     {city}
                                                </SubMenu>
                                            )
                                        }
                                    </SubMenu>
                                </Menu>
                            </Sider>
                            ）

      getProvinceList=()=>{
        const result=fetch('/web/chargeTrend/getChargePrinceList.htm'
            ,{method:'GET',
                credentials:'include',
            }).then((res)=>{
            return res.json();
        }).then((data)=>{
            //var ds=eval('('+data+')');
            console.log('ds',data);
            if(data.length>0)
            {
                if(this.state.openKeys[0]==="全国")
                {
                    this.setState({
                        provinceList: data,
                        openKeys:[],
                    },()=>{
                        console.log('privince',this.state.provinceList);
                    })
                }else{
                    var arrs=["全国"];
                    this.setState({
                        provinceList: data,
                        openKeys:arrs,
                    },()=>{
                        console.log('privince',this.state.provinceList);
                    })
                }


            }
        });
    }
    getCity=(parentid,name)=>{
        var arr=this.state.openKeys;

        const result=fetch('/web/chargeTrend/getChargeCityList.htm?parentid='+parentid,
            {method:'GET',
                credentials:'include',
            }).then((res)=>{
            return res.json();
        }).then((data)=>{
            console.log('city',data);
            if(data.length>0)
            {
                if(parentid===this.state.openKeys[1])
                {
                    var arrs=["全国"];
                    this.setState({
                        cityList:data,
                        adCode:parentid,
                        sRange:name,
                        openKeys:arrs,
                    },()=>{
                        console.log('cityList',this.state.cityList);
                        console.log('city1',this.state.openKeys);
                    });
                }else{
                    var arrs=["全国"];
                    arrs.push(parentid);
                    this.setState({
                        cityList:data,
                        adCode:parentid,
                        sRange:name,
                        openKeys:arrs,
                    },()=>{
                        console.log('cityList',this.state.cityList);
                        console.log('city1',this.state.openKeys);
                    });
                }

            }
        });
    }
    getCountryList=(parentid,name)=>{
        var arr=this.state.openKeys;
        const result=fetch('/web/chargeTrend/getCountyList.htm?parentid='+parentid,
            {method:'GET',
                credentials:'include',
            }).then((res)=>{
            return res.json();
        }).then((data)=>{
            console.log('country',data);
            if(data.length>0)
            {
                if(this.state.openKeys.length>=3)
                {
                    if(parentid===this.state.openKeys[2])
                    {
                        var arrs=["全国"];
                        arrs.push(arr[1]);
                        this.setState({
                            countryList:data,
                            adCode:parentid,
                            sRange:name,
                            openKeys:arrs,
                        },()=>{
                            console.log('Country1',this.state.openKeys)
                        });
                    }else{
                        var arrs=["全国"];
                        arrs.push(arr[1]);
                        arrs.push(parentid);
                        this.setState({
                            countryList:data,
                            adCode:parentid,
                            sRange:name,
                            openKeys:arrs,
                        },()=>{
                            console.log('Country2',this.state.openKeys)
                        });
                    }
                }else{
                    arr.push(parentid);
                    this.setState({
                        countryList:data,
                        adCode:parentid,
                        sRange:name,
                        openKeys:arr,
                    },()=>{
                        console.log('Country3',this.state.openKeys)
                    });
                }


            }
        });
    }
}