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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
Angular6新特性之Angular Material
Dec 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
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
浅谈js闭包理解
2019/03/28 Javascript
详解如何运行vue项目
2019/04/15 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python程序暂停的正常处理方法
2019/11/07 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python 如何查找特定类型文件
2020/08/17 Python
python入门教程之基本算术运算符
2020/11/13 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
合伙经营协议书范本
2014/04/18 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
父亲节活动策划方案
2014/08/24 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
横空出世观后感
2015/06/09 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书