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>