react写城市（省市区）联动的方法

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

在this.state中定义相应变量

 constructor(props){ 
 super(props); 
 this.state = {
 active: 'male',
 mapconfig:{
 center: { lat: 42.872, lng: 3.4},
 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>