antd Form组件方法getFieldsValue获取自定义组件的值操作


Posted in Javascript onOctober 29, 2020

自定义组件

1、自定义组件被getFieldsValue包裹,会获得以下属性

onChange方法, 子组件调用此方法,可将值传给父组件,从而Form可拿到自定义组件的值

value属性,获得初始值

antd Form组件方法getFieldsValue获取自定义组件的值操作

2、组件调用

像Form表单内的组件一样调用,就可以了

antd Form组件方法getFieldsValue获取自定义组件的值操作

补充知识:Ant Design Pro,用setFieldsValue方法,给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值

其实用setFieldsValue或者获取setState方法都可以设置DatePicker的默认值。

但是关键点在于,引用moment方法转换日期格式

1、setState方法,利用FormItem组件的initialValue属性设置默认值:

import moment from 'moment'; 
this.setState({defaultDate}) // 自定义默认日期
 
<FormItem label="日期选择框">
  {getFieldDecorator('date', {
    initialValue: moment(this.state.defaultDate, 'YYYY-MM-DD'),
  })(
    <DatePicker format={'YYYY-MM-DD'} />
  )}
</FormItem>

2、setFieldsValue方法,利用form的setFieldsValue属性赋值:

import moment from 'moment'; 
this.props.form.setFieldsValue({
  "date": moment("自定义默认日期", 'YYYY-MM-DD')
})
 
<FormItem label="日期选择框">
  {getFieldDecorator('date', {
    rules: [{ required: true }],
  })(
    <DatePicker format={'YYYY-MM-DD'} />
  )}
</FormItem>

RangePicker同理,只是 initialValue 变成了数组 [ moment( startDate ) , moment( endDate )]

以上这篇antd Form组件方法getFieldsValue获取自定义组件的值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ui resizable bug解决方法
Oct 26 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
Vue的Options用法说明
Aug 14 Javascript
node.js如何操作MySQL数据库
Oct 29 #Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 #Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 #Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 #Javascript
JavaScript实现随机点名小程序
Oct 29 #Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 #Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 #Javascript
You might like
ThinkPHP验证码使用简明教程
2014/03/05 PHP
浅谈PHP中的
2016/04/23 PHP
php简单实现数组分页的方法
2016/04/30 PHP
JavaScript中join()方法的使用简介
2015/06/09 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
vue实现文字加密功能
2019/09/27 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python学习笔记_数据排序方法
2014/05/22 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python版飞机大战代码分享
2018/11/20 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
百日安全活动总结
2014/05/04 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
Nginx配置根据url参数重定向
2022/04/11 Servers