在antd中setFieldsValue和defaultVal的用法


Posted in Javascript onOctober 29, 2020

代码如下:

componentWillMount() {
  this.props.form.setFieldsValue({
phone: this.props.maintain.account.phone,
    email: this.props.maintain.account.email
  });
  console.log(this.props.form.setFieldsValue);
}

打印出来

function setFieldsValue(fieldsValue) {
      var newFields = {};
      var fieldsMeta = this.fieldsMeta,
        fields = this.fields;  
      var virtualPaths = (0, _utils.getVirtualPat…      
undefined

更神奇的是这段代码本来运行的好好的一点问题都没有,在同事的电脑上却会出现如上问题,我的电脑也出现了这个问题但是代码没改过

后来就这样设置代码的默认值,就显示出来了

一定要加一个<div></div>

<FormItem
{...formItemLayout}
label="手机号"
>
{getFieldDecorator('phone', {
rules: [{
required: false, message: '请输入您的手机号!'
}]
})(
<div>
<Input className="content_style" addonBefore={<Icon type="mobile" />} defaultValue={maintain.account.phone} />
</div>
)}
</FormItem>

补充知识:antd4中Form组件initialValues设置初始值无效,使用setFieldsValue动态赋值,getFieldsValus动态获取值

首先说明initialValues这个属性,这个属性antd官方给的是设置Form组件初始值,但是有个问题如果值从后端请求那么initialValues可能会设置不上,如果说用匿名组件的话,修改From组件会导致一系列问题,

接下来就是用到了setFieldsValue和getFieldsValus属性

在antd官网中说明form组件不能使用this.setState修改值,

只能通过setFieldsValue来设置,

通过getFieldsValus来获取

首先通过getFieldsValus来动态获取值

export default class List extends Component {
  //第一步
  formRef = React.createRef();
 }

第二步

使用ref

<Form
   {...layout}
   name="basic"
   //这里  formRef在第一步中可以看到
   ref={this.formRef}
   
   //initialValues 设置初始值
   initialValues={this.state.formInitValues}
   //validateMessages 统一处理错误信息
   validateMessages={this.validateMessages}
   //form submit点击之后成功回调
   onFinish={onFinish}
   //form submit点击之后失败回调
   onFinishFailed={onFinishFailed}
 >
</Form>

使用setFieldsValue

注意:sell_linkman是Form中item的字段名,需要给那个字段赋值用这个就ok,可以写在你事件中

this.formRef.current.setFieldsValue({
   sell_linkman: value,
 })

使用getFieldsValue

‘sell_linkman'是form中item字段名

this.formRef.current.getFieldsValue('sell_linkman')

以上这篇在antd中setFieldsValue和defaultVal的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 #Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 #Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 #Javascript
微信小程序实现可长按移动控件
Nov 01 #Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 #Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 #Javascript
vue制作toast组件npm包示例代码
Oct 29 #Javascript
You might like
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
Vue使用NProgress进度条的方法
2019/09/21 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
详谈python read readline readlines的区别
2017/09/22 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
Form表单及django的form表单的补充
2019/07/25 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
三月雷锋月活动总结
2014/07/03 职场文书
社区服务活动小结
2014/07/08 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
学前班教学反思
2016/02/24 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
解析python中的jsonpath 提取器
2022/01/18 Python