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

原创已于 2022-09-09 11:08:34 修改 · 1.1w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#antd-mobile #行政区组件

于 2019-10-12 13:46:20 首次发布

JavaScript 同时被 3 个专栏收录

17 篇文章

订阅专栏

react

14 篇文章

订阅专栏

antd、antd-mobile

5 篇文章

订阅专栏

本文介绍如何利用 Ant Design Mobile 组件库实现地区选择器功能，使用国家标准(GB/T2260)的2016年行政区划数据，并推荐2022年更新的数据源。通过解析行政区数据并将其适配到组件中，实现省市区三级联动的选择体验。

实现效果如下：

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

这里使用的是国家标准(GB/T2260)，也就是2016年的标准行政区。

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

2022 更新 antd推荐使用china-division 提供的数据

代码中使用的数据：行政区数据（如果前面失效链接: https://pan.baidu.com/s/1oqdihRVTknM_AdzX31oZzg 提取码: 54qx ）

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

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

const CustomChildren = props => (
    <div
        onClick={props.onClick}
        style={{ backgroundColor: '#fff', paddingLeft: 15 }}
    >
        <div className="test" style={{ display: 'flex', height: '45px', lineHeight: '45px',position:'relative',borderBottom:0 }}>
            <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
            <div style={{ textAlign: 'right', color: '#888', marginRight: 15 }}>{props.extra}</div>
        </div>
    </div>
);

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 (
            <div>
                <Picker
                    title="选择地区"
                    extra="请选择(可选)"
                    data={antdDistrict}
                    value={this.state.pickerValue}
                    onChange={v => this.setState({ pickerValue: v })}
                    onOk={v => this.setState({ pickerValue: v })}
                    onClick={()=>{console.log('xx')}}
                >
                    <CustomChildren>Customized children</CustomChildren>
                </Picker>
            </div>
        )
    }
}

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

获取行政区