리액트에서 시(도, 시) 연계 작성법

一个新手
풀어 주다: 2017-10-01 07:44:41
원래의
2787명이 탐색했습니다.

컴포넌트에 연결된 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={&#39;省&#39;}
                            curActive={this.state.curActive}
                            curoption={this.state.curOption[&#39;province&#39;]}
                            chgOption={this.chgOption}
                            chgActive={this.chgActive}
                            nodefault={true}
                            dropData={provinceDropData}>
                        </DropList></span>
                         <span className="drop_city">
                        <DropList                            
                        propKey="city"
                            placeholder={&#39;市&#39;}
                            curActive={this.state.curActive}
                            curoption={this.state.curOption[&#39;city&#39;]}
                            chgOption={this.chgOption}
                            chgActive={this.chgActive}
                            nodefault={true}
                            dropData={cityDropData}>
                        </DropList></span>
                         <span className="drop_city">
                        <DropList                            
                        propKey="county"
                            placeholder={&#39;区&#39;}
                            curActive={this.state.curActive}
                            curoption={this.state.curOption[&#39;county&#39;]}
                            chgOption={this.chgOption}
                            chgActive={this.chgActive}
                            nodefault={true}
                            dropData={countyDropData}>
                        </DropList>
                             </span>
로그인 후 복사

위 내용은 리액트에서 시(도, 시) 연계 작성법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!