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 相关文章推荐
js静态方法与实例方法分析
Jul 04 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
js实现文字选中分享功能
Jan 25 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 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导出oracle库的php代码
2009/04/20 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
iOS10推送通知开发教程
2016/09/19 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
简单的代码实现jquery定时器
2014/01/03 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
javascript数据类型详解
2017/02/07 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
如何写python的配置文件
2020/06/07 Python
python中rc1什么意思
2020/06/19 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
奖励申请报告范文
2015/05/15 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
python实现简单的名片管理系统
2021/04/26 Python
深入浅析React中diff算法
2021/05/19 Javascript
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers