最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

react写城市(省市区)联动的方法

来源:动视网 责编:小采 时间:2020-11-27 20:12:18
文档

react写城市(省市区)联动的方法

react写城市(省市区)联动的方法:在components中引入联动的json文件import ProvinceData from '../../../../../json/area.json';在this.state中定义相应变量 constructor(props){ super(props); this.state = { active: 'ma
推荐度:
导读react写城市(省市区)联动的方法:在components中引入联动的json文件import ProvinceData from '../../../../../json/area.json';在this.state中定义相应变量 constructor(props){ super(props); this.state = { active: 'ma


在components中引入联动的json文件

import ProvinceData from '../../../../../json/area.json';

在this.state中定义相应变量

 constructor(props){ 
 super(props); 
 this.state = {
 active: 'male',
 mapconfig:{
 center: { lat: 42.872, lng: 3.644},
 zoom: 3
 },
 curOption: {
 province:'',
 city:'',
 county:'',
 job:'',
 edu:''
 }, //联动省级市数据
 deepProvince:null,
 deepCity:null
 }; 
 this.changeTab = this.changeTab.bind(this); 
 this.chgActive = this.chgActive.bind(this); 
 this.chgOption = this.chgOption.bind(this);

写联动的方法

 //drop 改变active
 chgActive(key) { 
 this.setState({
 curActive: key
 });
 } //drop 改变option
 chgOption(key, value) { 
 var obj = {};
 obj[key] = value;
 obj = Object.assign({}, this.state.curOption, obj); 
 this.setState({
 curOption: obj
 }); if(key === 'province'){ 
 this.setState({deepProvince:value})
 }else if(key === 'city'){ 
 this.setState({deepCity:value})
 }
 }

在render中声明变量以及调用和判断

 let {deepProvince,deepCity} = this.state;
 let provinceDropData =[],cityDropData=[],countyDropData =[];
 ProvinceData.provinceData.map(
 function(i){
 if(i.deep == 1){
 provinceDropData.push({
 nm:i.value,
 value:i.id
 })
 }
 }
 );
 if(deepProvince){
 ProvinceData.cities.map(function(i) {
 if (i.parentId === deepProvince) {
 cityDropData.push({
 nm: i.value,
 value: i.id
 })
 }
 });
 }
 if(deepCity){
 ProvinceData.counties.map(function(i) {
 if (i.parentId === deepCity) {
 countyDropData.push({
 nm: i.value,
 value: i.id
 })
 }
 });
 }

写相应的页面显示

<span className="drop_city">
 <DropList 
 className="country"
 propKey="province"
 placeholder={'省'}
 curActive={this.state.curActive}
 curoption={this.state.curOption['province']}
 chgOption={this.chgOption}
 chgActive={this.chgActive}
 nodefault={true}
 dropData={provinceDropData}>
 </DropList></span>
 <span className="drop_city">
 <DropList 
 propKey="city"
 placeholder={'市'}
 curActive={this.state.curActive}
 curoption={this.state.curOption['city']}
 chgOption={this.chgOption}
 chgActive={this.chgActive}
 nodefault={true}
 dropData={cityDropData}>
 </DropList></span>
 <span className="drop_city">
 <DropList 
 propKey="county"
 placeholder={'区'}
 curActive={this.state.curActive}
 curoption={this.state.curOption['county']}
 chgOption={this.chgOption}
 chgActive={this.chgActive}
 nodefault={true}
 dropData={countyDropData}>
 </DropList>
 </span>

文档

react写城市(省市区)联动的方法

react写城市(省市区)联动的方法:在components中引入联动的json文件import ProvinceData from '../../../../../json/area.json';在this.state中定义相应变量 constructor(props){ super(props); this.state = { active: 'ma
推荐度:
标签: 联动 省市 React
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top