react写城市（省市区）联动的方法-js教程-PHP中文网

react写城市（省市区）联动的方法

一个新手

发布： 2017-10-01 07:44:41

原创

2787 人浏览过

在components中引入联动的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})
        }
    }

登录后复制

在render中声明变量以及调用和判断

        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>

登录后复制

以上是react写城市（省市区）联动的方法的详细内容。更多信息请关注PHP中文网其他相关文章！