antd design Menu選單下拉回撥以及下拉選單時只能顯示一個列表，其餘關閉

我做的是一個顯示全國省市區的下拉選單：如下圖

這個下拉選單是三層巢狀的下拉選單，統計列表不能同時開啟，一次只能點開一個。點選下拉時觸發函式獲得下一層級的下拉資料。
程式碼如下：

  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)
                    });
                }


            }
        });
    }
}