Ant Cascader级联选择实现省市区三级联动(React)

    技术2022-07-15  61

    封装组件 < InputSelectWithArea />

    import React from 'react'; import CSS from './index.module.less'; import {Cascader} from "antd"; import { cityArray } from './cityData'; class InputSelectWithArea extends WidgetOfBase { render=()=>{ return( <Cascader style={{ width: '100%' }} options={cityArray} defaultValue={value} onChange={this.onChange} placeholder="Please select" /> ) } }

    cityData.js

    export const cityArray = [ { "label": "北京市", "value": "北京市", "children": [ { "label": "市辖区", "value": "市辖区", "children": [{ "label": "东城区", "value": "东城区" }, { "label": "西城区", "value": "西城区" }, { "label": "朝阳区", "value": "朝阳区" }, { "label": "丰台区", "value": "丰台区" }, { "label": "石景山区", "value": "石景山区" }, { "label": "海淀区", "value": "海淀区" }, { "label": "门头沟区", "value": "门头沟区" }, { "label": "房山区", "value": "房山区" }, { "label": "通州区", "value": "通州区" }, { "label": "顺义区", "value": "顺义区" }, { "label": "昌平区", "value": "昌平区" }, { "label": "大兴区", "value": "大兴区" }, { "label": "怀柔区", "value": "怀柔区" }, { "label": "平谷区", "value": "平谷区" }, { "label": "密云区", "value": "密云区" }, { "label": "延庆区", "value": "延庆区" }] }]... }//篇幅太长...
    Processed: 0.013, SQL: 9