Home > Article > Web Front-end > How to write city (province and city) linkage in react
Introduce the linked json file in components
import ProvinceData from '../../../../../json/area.json';
Define the corresponding variables in 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);
Write the linkage method
//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}) } }
Declare the variables in render and Calling and judging
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 }) } }); }
Write the corresponding page display
<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>
The above is the detailed content of How to write city (province and city) linkage in react. For more information, please follow other related articles on the PHP Chinese website!