Heim >Web-Frontend >js-Tutorial >So schreiben Sie die Verknüpfung von Stadt (Provinz und Stadt) in React
Führen Sie die verknüpfte JSON-Datei in Komponenten ein
import ProvinceData from '../../../../../json/area.json';
Definieren Sie die entsprechenden Variablen 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);
Schreiben Sie die Verknüpfungsmethode
//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}) } }
Deklarieren Variablen, Aufruf und Beurteilung beim Rendern
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 }) } }); }
Schreiben Sie die entsprechende Seitenanzeige
<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>
Das obige ist der detaillierte Inhalt vonSo schreiben Sie die Verknüpfung von Stadt (Provinz und Stadt) in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!