react使用antd级联实现省市区选择 React

import { Component } from 'react'; import { Cascader } from 'antd'; import * as addressRequest from '../../services/address'; export default class AreaPicker extends Component { constructor(props) { super(props); this.state = { options: [], defaultValue: this.props.value }; }componentDidMount() { if (this.state.defaultValue.length>0) { /**有默认值时获取所有列表*/ this.getAllOpt(); } else { this.getProvinceOpt(); } } render() { return ( ); }onChange = (value, selectedOptions) => { /**给父组件通知值变化*/ this.props.onChange(value); }; loadData = https://www.it610.com/article/selectedOptions => { let targetOption = selectedOptions[selectedOptions.length - 1]; targetOption.loading = true; /**获取市列表 */ if (selectedOptions.length == 1) { addressRequest.getCityList(targetOption.value).then(res => { targetOption.loading = false; let list = []; res.forEach(el => list.push({ label: el.value, value: el.code, isLeaf: false }) ); targetOption.children = list; this.setState({ options: [...this.state.options] }); }); } else { /**获取区列表 */ addressRequest.getRegionList(targetOption.value).then(res => { targetOption.loading = false; let list = []; res.forEach(el => list.push({ label: el.value, value: el.code }) ); targetOption.children = list; this.setState({ options: [...this.state.options] }); }); } }; /**没有默认值时初始化省列表 */ getProvinceOpt() { addressRequest.getProvinceList('0').then(res => { let list = []; res.forEach(el => { list.push({ label: el.value, value: el.code, isLeaf: false }); }); this.setState({ options: list }); }); } /**有默认选中的值时对数据进行初始化*/ getAllOpt() { let list1 = [], list2 = [], list3 = []; /**区获取 */ addressRequest.getRegionList(this.state.defaultValue[1]).then(res => { res.forEach(el => list3.push({ label: el.value, value: el.code }) ); /**市获取 */ addressRequest.getCityList(this.state.defaultValue[0]).then(res => { res.forEach(el => list2.push({ label: el.value, value: el.code, isLeaf: false, children: this.state.defaultValue[1] == el.code ? list3 : null }) ); /**省获取 */ addressRequest.getProvinceList('0').then(res => { res.forEach(el => { list1.push({ label: el.value, value: el.code, isLeaf: false, children: this.state.defaultValue[0] == el.code ? list2 : null }); }); this.setState({ options: list1 }); }); }); }); } }

【react使用antd级联实现省市区选择】

react使用antd级联实现省市区选择

推荐阅读

单机经典角色扮演类游戏，好玩的单机游戏角色扮演

卷心菜怎么洗农药卷心菜怎么洗

正睿，正睿nbspI243738WE内存规格怎样

苹果6投屏要怎么设置

雪铁龙天逸缺点赶紧来看看

免费文件夹加密器,文件夹加密器忘记密码怎么办

玉米虫养殖方法，玉米虫人工养殖的方法

vivox21参数,vivox21手机参数

内心的想法怎么会被别人知道如何不被别人知道自已的想法，如何不让别人知道自己的想法

微信小程序新手教程程序文件含义

冒险岛品克缤应该怎么用啊

赛车的防滚架有什么用

2012款福克斯两厢质量怎么样福特福克斯两厢怎么样

法国Cougar MS 40毫米榴弹发射器，现代化的外表包裹着简单的构造

摄影师画像摄影师画匠

荒野行动前10武器排名2020,荒野行动武器大全图解

视频需要配合什么问题，做视频需要准备什么工具

为什么不能养泰迪熊多肉

佳能相机x7 佳能x7i是750d吗

qq群拉好友不用同意直接进群怎么加入qq群