在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 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
在线编辑器中换行与内容自动提取
Apr 24 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 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入门学习笔记之一
2010/10/12 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
js中判断控件是否存在
2010/08/25 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Python类class参数self原理解析
2020/11/19 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
酒店出纳岗位职责
2013/12/29 职场文书
助残日活动总结
2014/08/27 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
旷课检讨书
2015/01/26 职场文书
物业前台接待岗位职责
2015/04/03 职场文书