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

封装组件 < 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": "延庆区" }] }]...
  }//篇幅太长...