专栏首页菜鸟前端工程师react-开发经验分享-Select选择框表单实现异步省市联动

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • html+css学习笔记021-结业(静态网站布局-努比亚)

    Mr. 柳上原
  • JavaScript学习笔记015-Promise0Async0try catch

    Mr. 柳上原
  • JavaScript学习笔记005-运算符

    Mr. 柳上原
  • AI热点:腾讯无人车曝光,第一次竟把车子开上了四环;首个中国高校AI人才培养计划启动,李开复开班授课

    4月2日,腾讯自动驾驶原型车首次曝光。这是一辆白色长城SUV改装的原型车,据相关人士透露,当时车内有司机,双手扶在方向盘上,该车应该不处于自动驾驶状态。据了解,...

    AiTechYun
  • AI一分钟 | 马斯克称“火星旅行”有望2019实现,起价500万美元;百度成极米科技第二大股东

    整理 | 明明 一分钟AI 马斯克:SpaceX正在建造首艘火星飞船,火星旅行有望2019上半年实现,起价500万美元 百度战略投资极米科技成第二大股...

    AI科技大本营
  • 资源 | 伯克利发布BDD100K:目前最大规模开放驾驶视频数据集

    机器之心
  • AI助力新药研制,三周内完成鉴定,有望节省数百万美元成本

    看过徐峥主演的《我不是药神》的同学应该都对这一情节印象深刻,瑞士诺瓦公司(影射现实中的瑞士诺华公司)生产的治疗慢性粒细胞性白血病的分子靶向药物“格列宁”(影射现...

    大数据文摘
  • 人工智能的7种类型

    人工智能,也许是人类有史以来最复杂和最让人震惊的创造物。同时也忽略了一个事实,即仍然有大片的领域人工智能仍未涉及。

    用户6026865
  • 我也看看《为未来人工智能做好准备》

    美国政府刚出台完《国家人工智能研究与发展规划》, 做完现阶段规划, 又开始着眼未来, 出台了《为未来人工智能做好准备》的展望。

    史博
  • 基辛格发出警告:人工智能太聪明该怎么办?

    【新智元导读】如果有一天,机器学会了互相通信,超越人类的认知,这个世界会变成什么样?美国前国务卿亨利·基辛格向人类发出了一个严厉警告:人工智能的进步可能导致一个...

    新智元

扫码关注云+社区

领取腾讯云代金券