使用react和axios实现的城市三级联动

Posted 2020-12-08 jack杰克

使用react和axios搭建的城市三级联动

  1 import React from "react"
  2 import axios from "axios";
  3 class CeshiContainer extends React.Component {
  4     constructor(props) {
  5         super(props);
  6         this.state = {
  7             data: [],
  8             province: "",
  9             city: "",
 10             county: "",
 11             provinces: [],
 12             cities: [],
 13             counties: []
 14         }
 15     }
 16 
 17     handleChangeprovince(e) {
 18         e.preventDefault()
 19         const data = this.state.data
 20         for(var i in data) {
 21             if(data[i].name == e.target.value) {
 22                 this.setState({
 23                     cities: data[i].city,
 24                     counties: data[i].city[0].area,
 25                     province: e.target.value,
 26                     city: "",
 27                     county: ""
 28                 })
 29             }
 30         }
 31     }
 32 
 33     handleChangecity(e) {
 34         e.preventDefault()
 35         const cities = this.state.cities
 36         for(var i in cities) {
 37             if(cities[i].name == e.target.value) {
 38                 this.setState({
 39                     counties: cities[i].area,
 40                     city: e.target.value,
 41 
 42                 })
 43             }
 44         }
 45     }
 46 
 47     handleChangecounty(e) {
 48         e.preventDefault()
 49         this.setState({
 50             county: e.target.value
 51         })
 52     }
 53     render() {
 54         return(
 55             <div>
 56             {
 57              this.state.provinces.length!=0
 58              ?
 59                 <p>
 60                     <select onChange={this.handleChangeprovince.bind(this)}>
 61                     <option>省</option>
 62                         {
 63                          this.state.provinces.map((i,index) => (
 64                                             <option value={i} key={index}>{i}</option>
 65                                         ))
 66                             }
 67                     </select>
 68                     <select onChange={this.handleChangecity.bind(this)}>
 69                     <option>市</option>
 70                         {
 71                          this.state.cities.map((i,index) => (
 72                                             <option value={i.name} key={index}>{i.name}</option>
 73                                         ))
 74                             }
 75                     </select>
 76                     <select onChange={this.handleChangecounty.bind(this)}>
 77                     <option>区</option>
 78                         {
 79                          this.state.counties.map((i,index) => (
 80                                             <option value={i} key={index}>{i}</option>
 81                                         ))
 82                             }
 83                     </select>
 84                  </p>    
 85                  :<p>11111111</p>
 86                }
 87             <div>{this.state.province+this.state.city+this.state.county}</div>
 88              </div>
 89         )
 90     }
 91     componentDidMount() {
 92         const provinces = []
 93         const data = []
 94         //请求API
 95         const url = "***********************";
 96         const resquest = axios.get(url);
 97         resquest.then(res => {
 98             Object.assign(res.data).map(i => {
 99                 provinces.push(i.name)
100                 data.push(i)
101             })
102             this.setState({
103                 data: data,
104                 provinces: provinces,
105                 cities: data[0].city,
106                 counties: data[0].city[0].area
107             })
108         })
109 
110     }
111 
112 }
113 
114 export default CeshiContainer