React 省市区选择控件封装

接口数据

image.png

代码

import React from 'react'
import { Picker } from 'antd-mobile'
/**
 
 *     <AreaPicker
          visible={contractPickerVisible}
          onCancel={()=>{this.setState({contractPickerVisible: false})}}
          onSure={(area)=>{console.log(area.showName)}}
        />
 */

interface AreaPickerState {
    areaData: any
}

interface AreaPickerProps {
    diyprops?: any
    visible: boolean
    onCancel(): void
    onSure(area: any): void
}

class AreaPicker extends React.Component<
    AreaPickerProps,
    AreaPickerState
> {
    constructor(props: AreaPickerProps) {
        super(props)
        this.state = {
            areaData: []
        }
        this.initAreaData()
    }

    initAreaData() {
        fetch("..address.json")
            .then((response) => {
                return response.json()
            })
            .then((responseData) => {
                // i:11000 v: 北京市 分别对应 value,label
                responseData.AddressList.map((item) => {
                    item.value = item.i + ''
                    item.label = item.v
                    item.children = item.c
                    delete item.c
                    delete item.i
                    delete item.v
                    delete item.s
                    if (item.children) {
                        item.children.map((item1) => {
                            item1.children = item1.c
                            item1.value = item1.i + ''
                            item1.label = item1.v
                            delete item1.c
                            delete item1.i
                            delete item1.v
                            delete item1.s
                            if (item1.children) {
                                item1.children.map((item2) => {
                                    item2.value = item2.i + ''
                                    item2.label = item2.v
                                    delete item2.i
                                    delete item2.v
                                    delete item2.s
                                })
                            }
                        })
                    }
                })
                this.setState({
                    areaData: responseData.AddressList
                })
            }).catch((err) => {
                console.log('initAreaData', err)
            });
    }

    // ['1111', '2222', '3333']
    onClickSure(onSure: any, areaData: any, selArea: any) {
        const provinceItem = areaData.find((item) => item.value == selArea[0])
        const cityItem = provinceItem.children.find((item) => item.value == selArea[1])
        const contryItem = cityItem.children.find((item) => item.value == selArea[2])
        const callBackResult = {}
        callBackResult['showName'] = provinceItem.label + ',' + cityItem.label + ',' + contryItem.label
        callBackResult['code'] = selArea
        onSure(callBackResult)
    }

    render() {
        const {
            diyprops,
            visible,
            onSure,
            onCancel
        } = this.props

        const {
            areaData
        } = this.state
        return (

            <Picker
                title='请选择地区'
                data={areaData}
                onDismiss={() => {
                    onCancel()
                }}
                onOk={v => { this.onClickSure(onSure, areaData, v) }}
                visible={visible}
                {...diyprops}
            />
        )
    }
}

export default AreaPicker

参考:
JS Object 对象中删除属性
[Picker 选择器]
(https://mobile.ant.design/components/picker-cn/)