react-省市区三级联动(树结构/数组结构)

树结构

import React, { Component } from 'react'

export default class City extends Component {
  constructor() {
    super();
    this.state = {
      List: [
        {
          id: 1, name: "湖北省",
          List: [
            {
              id: 11, name: "武汉市",
              List: [
                { id: 111, name: "洪山区" },
                { id: 112, name: "武昌区" },
                { id: 113, name: "江夏区" },
              ]
            },
            {
              id: 12, name: "孝感市",
              List: [
                { id: 121, name: "孝南区" },
                { id: 122, name: "孝昌区" },
                { id: 123, name: "孝北区" },
              ]
            }
          ]
        },
        {
          id: 2, name: "湖南省",
          List: [
            {
              id: 21, name: "长沙市",
              List: [
                { id: 211, name: "雨花区" },
                { id: 212, name: "天心区" },
                { id: 213, name: "望城区" },
              ]
            },
            {
              id: 22, name: "常德市",
              List: [
                { id: 221, name: "武陵区" },
                { id: 222, name: "鼎城区" },
                { id: 223, name: "临澧县" },
              ]
            }
          ]
        },
      ],
      citylist: [],//城市集合
      arealist: [],//区域集合
    }
  }
  changeProvince = (id) => {
    if (id) {//根据省份的id找到对应的城市
      this.setState({
        citylist: this.state.List.filter(item => item.id === id * 1)[0]["List"],
        arealist:[]
      })
    }
  }
  changeArea = (id) => {
    if (id) {//根据城市的id找到对应的区县
      this.setState({
        arealist: this.state.citylist.filter(item => item.id === id * 1)[0]["List"]
      })
    }
  }
  render() {
    // let {provincesList,citysList,areasList}=this.state
    return (
      <div>
        <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.citylist.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>
    )
  }
}

 数组结构

import React, { Component } from 'react'

export default class City extends Component {
  constructor() {
    super();
    this.state = {
      Arr: [//数组结构
        { id: 1, name: "湖北省", pid: 0 },
        { id: 2, name: "湖南省", pid: 0 },
        { id: 3, name: "武汉市", pid: 1 },
        { id: 4, name: "孝感市", pid: 1 },
        { id: 5, name: "长沙市", pid: 2 },
        { id: 6, name: "常德市", pid: 2 },
        { id: 7, name: "洪山区", pid: 3 },
        { id: 8, name: "武昌区", pid: 3 },
        { id: 9, name: "江夏区", pid: 3 },
        { id: 10, name: "孝南区", pid: 4 },
        { id: 11, name: "孝昌区", pid: 4 },
        { id: 12, name: "孝北区", pid: 4 },
        { id: 13, name: "雨花区", pid: 5 },
        { id: 14, name: "天心区", pid: 5 },
        { id: 15, name: "望城区", pid: 5 },
        { id: 16, name: "武陵区", pid: 6 },
        { id: 17, name: "鼎城区", pid: 6 },
        { id: 18, name: "临澧县", pid: 6 },
      ],
      citylist1: [],//城市集合
      arealist1: [],//区域集合
    }
  }
  getCity = (id) => {
    this.setState({
      citylist1: this.state.Arr.filter(item => item.pid === id * 1),
      arealist1:[]
    })
    // console.log(this.state.citylist1);
  }
  getArea = (id) => {
    this.setState({
      arealist1: this.state.Arr.filter(item => item.pid === id * 1)
    })
    console.log(this.state.arealist1);

  }
  render() {
    let provincelist = this.state.Arr.filter(item => item.pid === 0)
    return (
      <div>
        <h3>省市区三级联动(数组结构)</h3>
        <select onChange={(e) => {
          this.getCity(e.target.value)
        }}>
          <option value="" >请选择省份</option>
          {provincelist.map(item => {
            return <option key={item.id} value={item.id}>{item.name}</option>
          })}
        </select>
        <select onChange={(e) => {
          this.getArea(e.target.value)
        }}>
          <option value="" >请选择市区</option>
          {this.state.citylist1.map(item => {
            return <option key={item.id} value={item.id}>{item.name}</option>
          })}
        </select>
        <select>
          <option value="" >请选择区域</option>
          {this.state.arealist1.map(item => {
            return <option key={item.id} value={item.id}>{item.name}</option>
          })}
        </select>
      </div>
    )
  }
}