react-省市区三级联动

App.js代码

import React, { Component } from 'react'
import "./App.css"
export default class App extends Component {
  constructor(){
    super();
    this.state={
      list:[
        {
          id:1,name:"河北省",
          list:[
            {
              id:11,name:"邯郸市",
              list:[
                {id:121,name:"丛台区"},
                {id:122,name:"复兴区"},
                {id:123,name:"邯山区"},
                {id:124,name:"永年区"},
                {id:125,name:"肥乡区"},
                {id:126,name:"峰峰矿区"},
                {id:127,name:"肥乡区"},
                {id:128,name:"武安市"},
              ]
            },
            {
              id:12,name:"石家庄市",
              list:[
                {id:121,name:"长安区"},
                {id:122,name:"桥西区"},
                {id:123,name:"鹿泉区"},
                {id:124,name:"裕华区"},
                {id:125,name:"藁城区"},
                {id:126,name:"栾城区"},
                {id:127,name:"新华区"},
                {id:128,name:"井陉矿区"},
              ]
            }
          ]
        },
        {
          id:2,name:"北京",
          list:[
            {
              id:21,name:"北京市",
              list:[
                {id:211,name:"丰台区"},
                {id:212,name:"朝阳区"},
                {id:213,name:"房山区"},
                {id:214,name:"海淀区"},
                {id:215,name:"昌平区"},
                {id:216,name:"石景山区"},
                {id:217,name:"东城区"},
                {id:218,name:"西城区"},
                {id:219,name:"通州区"},
                {id:220,name:"门头沟区"},
                {id:221,name:"顺义区"},
                {id:222,name:"大兴区"},
                {id:223,name:"海淀区"},
                {id:224,name:"怀柔区"},
                {id:225,name:"平谷区"},
                {id:226,name:"密云区"},
                {id:227,name:"延庆区"},
              ]
            }
          ]
        },
        {
          id:3,name:"湖南",
          list:[
            {
              id:31,name:"长沙市",
              list:[
                {id:311,name:"芙蓉区"},
                {id:312,name:"天心区"},
                {id:313,name:"开福区"},
                {id:314,name:"雨花区"},
                {id:315,name:"望城区"},
                {id:316,name:"岳麋区"},
              ]
            }
          ]
        },
      ],
      ctiylist:[],    //城市集合
      arealist:[],    //区域集合
    }
  }
changeProvince=(id)=>{
  if(id){
    this.setState({
      ctiylist:this.state.list.filter(item=>item.id===id*1)[0]["list"],
      arealist:[]
    })
  }
}
changeArea=(id)=>{
  if(id){
    this.setState({
      arealist:this.state.ctiylist.filter(item=>item.id===id*1)[0]["list"],
    })
  }
}
  render() {
    return (
      <div className='bor'>
       <h3>省市区三级联动</h3>
       <select onChange={(e)=>{
        this.changeProvince(e.target.value)
       }}>
        <option value="">请选择省份</option>
        {this.state.list.map(item=>{
          return<option key={item.id} value={item.id}>{item.name}</option>
        })}
       </select>
       <select onChange={(e)=>{
        this.changeArea(e.target.value)
       }}>
        <option value="">请选择市区</option>
        {this.state.ctiylist.map(item =>{
          return <option key={item.id} value={item.id}>{item.name}</option>
        })}
       </select>
       <select>
        <option value="">请选择区域</option>
        {this.state.arealist.map(item=>{
          return <option key={item.id} value={item.id}>{item.name}</option>
        })}
       </select>
      </div>
    )
  }
}