React Cascader組件實現地址選擇

1.使用Cascader連級組件實現項目中城市選擇

 import {cityData} from "./static/js/city";

 <Form.Item
                                label="辦公地址"
     >
                                {getFieldDecorator('addressAll', {
                                    rules: [{ required: true, message: '地址詳情不能為空!' }],
                                })(
                                    <Cascader

                                        suffixIcon={<Icon type="caret-down"/>}
                                        options={cityData}
                                        onChange={this.props.selectedCity}
                                        placeholder="請選擇" />
                                )}
</Form.Item>

2.地址js文件保存在文件以備用

格式如下：

export const cityData = [{
 value: 'zhejiang',
  label: 'Zhejiang',
  children: [{
    value: 'hangzhou',
    label: 'Hangzhou',
    children: [{
      value: 'xihu',
      label: 'West Lake',
    }],
  }],
}, {
  value: 'jiangsu',
  label: 'Jiangsu',
  children: [{
    value: 'nanjing',
    label: 'Nanjing',
    children: [{
      value: 'zhonghuamen',
      label: 'Zhong Hua Men',
    }],
  }],
}]

 效果如下