컴포넌트에 연결된 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}) } }
렌더링에서 변수 선언 및 호출 및 판단
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>
위 내용은 리액트에서 시(도, 시) 연계 작성법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!