React Cascader组件实现地址选择

1.使用Cascader连级组件实现项目中城市选择

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

<Form.Item label="办公地址" > {getFieldDecorator('addressAll', { rules: [{ required: true, message: '地址详情不能为空!' }], })( <Cascader suffixIcon={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',
    }],
  }],
}]

 效果如下

React Cascader组件实现地址选择_第1张图片

 

转载于:https://www.cnblogs.com/feng3037/p/10502128.html

你可能感兴趣的:(React Cascader组件实现地址选择)