React Cascader组件实现地址选择

发布时间：2020-12-15 20:33:30 所属栏目：百科来源：网络整理

导读：1.使用Cascader连级组件实现项目中城市选择 import {cityData} from "./static/js/city"; Form .Item label ="办公地址" {getFieldDecorator(‘addressAll‘,{ rules: [{ required: true,message: ‘地址详情不能为空!‘ }],})( Cascader suffixIcon ={Icon

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!