react写城市(省市区)連動

componentsに連動jsonファイルを導入する

import ProvinceData from '../../../../../json/area.json';

これです.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})
        }
    }

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={' '}
                            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>