react-开发经验分享-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>