在antd Form表单中select设置初始值操作


Posted in Javascript onNovember 02, 2020

我就废话不多说了,大家还是直接看代码吧~

<Form.Item label="作用对象">
      {getFieldDecorator('targetId', { initialValue: this.state.targetId }, {
       rules: [{
        required: false,
        message: '作用对象'
       }]
      })(
       <Select placeholder="请选择作用对象">
        {targetList.map(entity => <Option key={entity.id} value={entity.id}>{entity.name}</Option>)}
       </Select>
      )}
     </Form.Item>

在getFieldDecorator('targetId',时添加初始值而不是在select标签中添加初始值

补充知识:解决antd 表单获取不到默认值的问题

使用 antd 的 4.x 版本,给表单设置初始值,但是获取不到值

如果需要设置默认值并展示到页面上,需要设置两个地方:

设置 defaultValue,这个是用来展示在页面上的,例如:

<Form.Item label="Sex" name="sex" valuePropName="checked">
 //这里的defaultValue
 <Radio.Group defaultValue={1}>
 <Radio value={1}>男</Radio>
 <Radio value={0}>女</Radio>
 </Radio.Group>
</Form.Item>

设置 initialValues,这个是用来获取表单值的,例如:

<Form
 name="basic"
 onFinish={this.onFinish}
 onFinishFailed={this.onFinishFailed}
 initialValues={{
  sex: 1
 }}
 >
 <Form.Item label="Sex" name="sex" valuePropName="checked">
  <Radio.Group defaultValue={1}>
  <Radio value={1}>男</Radio>
  <Radio value={0}>女</Radio>
  </Radio.Group>
 </Form.Item>

 <Form.Item {...tailLayout}>
  <Button type="primary" htmlType="submit">
  register
  </Button>
 </Form.Item>
 </Form>

以上这篇在antd Form表单中select设置初始值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
js仿360开机效果
Dec 26 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
详解 TypeScript 枚举类型
Nov 02 Javascript
react+antd 递归实现树状目录操作
Nov 02 #Javascript
antd form表单数据回显操作
Nov 02 #Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 #Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 #Javascript
JavaScript实现刮刮乐效果
Nov 01 #Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 #Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 #Javascript
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
在Python中定义一个常量的方法
2018/11/10 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
卫生安全检查制度
2014/02/04 职场文书
黄金搭档广告词
2014/03/21 职场文书
公司年会主持词
2014/03/22 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
解除施工合同协议书
2014/10/17 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
董事长开业致辞
2015/07/29 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers