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提交form表单简单示例分享
Mar 03 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
js图片处理示例代码
May 12 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 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
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
安装dbus-python的简要教程
2015/05/05 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
运动会标语
2014/06/21 职场文书
法制宣传标语集锦
2014/06/25 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
企业员工辞职信范文
2015/05/12 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android