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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
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
新浪新闻小偷
2006/10/09 PHP
PHP4.04简明安装
2006/10/09 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php的ddos攻击解决方法
2015/01/08 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
Js动态创建div
2008/09/25 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python实现基本线性数据结构
2016/08/22 Python
python决策树之CART分类回归树详解
2017/12/20 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
Python简单I/O操作示例
2019/03/18 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
教师校本培训方案
2014/02/26 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
服务器间如何实现文件共享
2022/05/20 Servers