在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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 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 print EOF实现方法
2009/05/21 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
DataList 能否分页,请问如何实现?
2015/05/03 面试题
出国留学自荐信
2013/10/25 职场文书
酒店保洁主管岗位职责
2013/11/28 职场文书
给同事的道歉信
2014/01/11 职场文书
家长学校实施方案
2014/03/15 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
经典演讲稿汇总
2014/05/19 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
新党章的学习心得体会
2014/11/07 职场文书
2014年质量工作总结
2014/11/22 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript