react-开发经验分享-Select选择框表单实现异步省市联动

Author：Mr.柳上原

• 付出不亚于任何的努力
• 愿我们所有的努力，都不会被生活辜负
• 不忘初心，方得始终

ant框架里，Select选择框表单实现省市联动的方法
在ant框架中，Select选项框组件里有一套实现省市联动的组件方法
但是，他使用的是写定的死数据
在正式企业开发中，往往是需要调用后端接口数据来动态实现省市联动的
而且后端接口的数据结构在不同的公司中可能各不相同
因此写了一套大众型异步调用省市联动组件方法
方法如下：

// 使用state来存储后端数据并动态更新
this.state = {
    cityList: [], // 城市
    districtList: [], // 区域
}

// 在生命周期函数中调用，或者也可以在Select选择框中触发接口调用
componentDidMount() {
        this.initialCity();
 }

// 城市整体数据
    initialCity = async (value) => {
        // 城市数据
        const cityCondition = {
            "levels": [
                "1"
            ]
        }
        let cityData = await basicDataApi.postCityList(cityCondition); // 此处使用了自定义封装的后端接口请求方法
        let cityList = cityData.extension || [];
        let cityId = '';
        cityList.map((item, index) => {
            if (item.code == value) {
                cityId = item.code;
            }
        })

        // 城下所属地区数据
        const districtCondition = cityId;
        let districtList = [];
        if(districtCondition) {
            let districtData = await basicDataApi.getDistrictList(districtCondition); // 此处使用了自定义封装的后端接口请求方法
            districtList = districtData.extension || [];
        }

        this.setState({
            cityList,
            districtList,
        })
    }

// 此处可以查看Select里输出的省市联动数据
handleCityChange = (value) => {
        this.initialCity(value);
        console.log(value);
    }

  handleDistrictChange = (value) => {
        console.log(value);
 }

// 最后记得在render里输出页面

      
             {form.getFieldDecorator('city')(
                 
                        {cityList.map(city => {city.name})}
                          )}
            


       
            {form.getFieldDecorator('district')(
                
                     {districtList.map(district => {district.name})}
                       )}