react 利用select编写省市级三级联动

以下是代码(实现的代码部分)

  selectProvience:'',//变化选中的省份
  selectNextProvience:'',//变化选中的市级单位
  provienceInfo:[],//获取省份信息
  provienceNextInfo:[],//获取省份的下一级信息
  provienceNextsInfo:[],//获取县级信息
// 获取省市县
  getAddress(code,status){
    if(code){
      var parentCodeID= code
    }else{
      parentCodeID = null
    }
    var _this =this
    axios.get("/api/LsProvinces",{
      params:{
        filter:{
          where:{
            parentCode:parentCodeID
          }
        }}
    }).then(response => {
      if(code){
         if(status){
          _this.setState({provienceNextsInfo:response.data})
         }else{
          _this.setState({provienceNextInfo:response.data})
          //_this.state.provienceNextInfo = response.data
         }

      }

changeProvience(e){
    var value = e.target.value
    this.setState({selectProvience:value})
    this.setState({provienceNextInfo:[]})
    this.setState({provienceNextsInfo:[]})
    this.state.provienceInfo.map((item,index)=>{
      if(e.target.value===item.name){
        this.getAddress(item.code)
      }
    })

  }
  changeNextProvience(e){
    var value = e.target.value
    this.setState({selectNextProvience:value})
    this.setState({provienceNextsInfo:[]})
    this.state.provienceNextInfo.map((item,index)=>{
      if(e.target.value===item.name){
        this.getAddress(item.code,true)
      }
    })
  }

render() {

const provience = this.state.provienceInfo.map((cityInfo, index) => {

return 

})

const provienceNext = this.state.provienceNextInfo.map((item,index)=>{

return 

})

const provievceNexts = this.state.provienceNextsInfo.map((item,index)=>{

return 

})

return (
产地: - -

思想逻辑部分

只要是利用select的onChange()事件

以及要书写select的默认值,这样可以知道我们选择的是哪一级标签,利用这个选中的进行获取市级信息,由市级信息获取县级信息是同样的道理。

你可能感兴趣的:(react 利用select编写省市级三级联动)