在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实现划词标记+划词搜索功能
Mar 06 Javascript
JQuery 入门实例1
Jun 25 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
react项目实践之webpack-dev-serve
Sep 14 Javascript
JavaScript中Dom操作实例详解
Jul 08 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的urlencode()URL编码函数浅析
2011/08/09 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
优秀管理者获奖感言
2014/02/17 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python