antd-region-select

安装包

npm install antd-region-select

示例

import RegionSelect from 'antd-region-select'


class App extends Component {
    constructor(props){
        super(props)
        this.state = {
            valueName:"",
            regionItem:{
                provinceId:null,
                provinceName:null,
                cityId:null,
                cityName:null,
                districtId:null,
                districtName:null,
            }
        }
    }
    onAreaChange(valueObj,selectVal){
        console.log(valueObj)
        console.log(selectVal)
        this.setState({
          regionItem:valueObj,
          valueName:selectVal
        })
    }


  render() {

    //获取省市区公共接口
    //const regions = response.data[0].children
    
    const regions = [{
        "value": 32,
        "label": "重庆",
        "children": [{
            "value": 394,
            "label": "重庆",
            "children": [{
                "value": 3328,
                "label": "永川区"
            }]
        }]
    }]
    

    return (
      <RegionSelect
        val={this.state.regionItem}
        regions={regions}
        showClear={false}
        showCity={true}
        showDistrict={true}
        onAreaChange={(valueObj,selectVal) => {
          this.onAreaChange(valueObj,selectVal)
        }}
      >
        <Input placeholder="请选择装货地址" value={this.state.valueName} readOnly />
      </RegionSelect>
    );
  }
}

演示