리액트에서 시(도, 시) 연계 작성법-JS 튜토리얼-php.cn

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

一个新手

풀어 주다： 2017-10-01 07:44:41

원래의

2790명이 탐색했습니다.

컴포넌트에 연결된 json 파일 도입

import ProvinceData from &#39;../../../../../json/area.json&#39;;

로그인 후 복사

this.state에 해당 변수 정의

    constructor(props){        
            super(props);        
            this.state = {
            active: &#39;male&#39;,
            mapconfig:{
                center: { lat: 42.872, lng: 3.644},
                zoom: 3
            },
            curOption: {
                province:&#39;&#39;,
                city:&#39;&#39;,
                county:&#39;&#39;,
                job:&#39;&#39;,
                edu:&#39;&#39;
            },            //联动省级市数据
            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 === &#39;province&#39;){            
        this.setState({deepProvince:value})
        }else if(key === &#39;city&#39;){            
        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 중국어 웹사이트의 기타 관련 기사를 참조하세요!