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 districtData = await basicDataApi.getDistrictList(districtCondition); // 此处使用了自定义封装的后端接口请求方法
        let districtList = districtData.extension || [];

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

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

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

// 最后记得在render里输出页面
<Col span={3}>
      <FormItem labelCol={{span: 7}} wrapperCol={{span: 16}} label='区域:'>
             {form.getFieldDecorator('city')(
                 <Select
                     placeholder={'请选择城市'}
                     style={{width: 138}}
                       onChange={this.handleCityChange}
                   >
                        {cityList.map(city => <Option key={city.code}>{city.name}</Option>)}
                          </Select>)}
            </FormItem>
</Col>
<Col span={2}>
       <FormItem wrapperCol={{span: 25}}>
            {form.getFieldDecorator('district')(
                <Select
                    placeholder={'请选择地区'}
                    style={{width: 138}}
                    onChange={this.handleDistrictChange}
                 >
                     {districtList.map(district => <Option key={district.code}>{district.name}</Option>)}
                       </Select>)}
            </FormItem>
</Col>