在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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
Vue简单实现原理详解
May 07 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
20行python代码实现人脸识别
2019/05/05 Python
python列表生成器迭代器实例解析
2019/12/19 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
中层干部岗位职责
2013/12/18 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
新闻编辑求职信
2014/04/09 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
2015团员个人年度总结
2015/11/24 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android