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' ,
    }],
  }],
}] 

 效果如下

 

查看更多关于React Cascader组件实现地址选择的详细内容...