Heim > Web-Frontend > js-Tutorial > Hauptteil

So schreiben Sie die Verknüpfung von Stadt (Provinz und Stadt) in React

一个新手
Freigeben: 2017-10-01 07:44:41
Original
2765 Leute haben es durchsucht

Führen Sie die verknüpfte JSON-Datei in Komponenten ein

import ProvinceData from '../../../../../json/area.json';
Nach dem Login kopieren

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);
Nach dem Login kopieren

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})
        }
    }
Nach dem Login kopieren

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
                    })
                }
            });
        }
Nach dem Login kopieren

Schreiben Sie die entsprechende Seitenanzeige

<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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!