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异步请求实例代码
Jun 21 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
Vue组件基础用法详解
Feb 05 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
JS中一些高效的魔法运算符总结
May 06 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下载文件的代码示例
2012/06/29 PHP
php实现图片添加水印功能
2014/02/13 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
《失物招领》教学反思
2016/02/20 职场文书
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers