结合antd-mobile选择器的行政区三级联动组件

实现效果如下：

老实说实现方法很简单，antd-mobile提供了组件，只是没提供国家行政区数据，我只是把数据‘交给’这个组件罢了。

这里使用的是《中华人民共和国行政区划代码》国家标准(GB/T2260)，也就是2016年的国家标准行政区。

如果大佬有最新的数据，希望能分享一下

代码中使用的数据：  行政区数据

把上面下载的json文件放到下面同级文件夹下 参考这句引用let districtData = require('./location');

import {Picker} from 'antd-mobile'
import React from 'react'

const CustomChildren = props => (
    

        

            
{props.children}
            
{props.extra}
        
    
);

export default class extends React.Component {
    constructor(props){
        super(props);
        this.state={
            pickerValue: [],
        };
    }

    render(){
        let antdDistrict =[];
        let districtData = require('./location');
        Object.keys(districtData).forEach((index)=>{
            let itemLevel1 ={};
            let itemLevel2 ={};
            itemLevel1.value = districtData[index].code;
            itemLevel1.label = districtData[index].name;
            itemLevel1.children = [];
            let data = districtData[index].cities;
            Object.keys(data).forEach((index)=>{
                itemLevel2.value = data[index].code;
                itemLevel2.label = data[index].name;
                itemLevel2.children = [];
                let data2 = data[index].districts;
                let itemLevel3 ={};
                itemLevel3.children = [];
                Object.keys(data2).forEach((index)=>{
                    itemLevel3.value = index;
                    itemLevel3.label = data2[index];
                    itemLevel2.children.push(itemLevel3);
                    itemLevel3 ={};
                });
                itemLevel1.children.push(itemLevel2);
                itemLevel2 ={};
            });
            antdDistrict.push(itemLevel1)
        });
        console.log(antdDistrict);
        return (
            

                 this.setState({ pickerValue: v })}
                    onOk={v => this.setState({ pickerValue: v })}
                    onClick={()=>{console.log('xx')}}
                >
                    Customized children
                
            
        )
    }
}

附网上查到的资源：下拉框式行政区组件

获取行政区