在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 30 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
浅析Vue下的components模板使用及应用
Nov 27 Javascript
微信小程序实现菜单左右联动
May 19 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中目录,文件操作详谈
2007/03/19 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
Vue实现手机计算器
2020/08/17 Javascript
Python中动态创建类实例的方法
2017/03/24 Python
python 获取字符串MD5值方法
2018/05/29 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
美德少年事迹材料1000字
2014/08/21 职场文书
挂职学习心得体会
2014/09/09 职场文书
门面房租房协议书
2014/12/01 职场文书
预备党员考察意见范文
2015/06/01 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
青年志愿者活动感想
2015/08/07 职场文书
600字作文之感受大自然
2019/11/27 职场文书