在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 相关文章推荐
用js设置下拉框为只读的小技巧
Apr 10 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
学习十八大演讲稿
2014/09/15 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
农村老人去世追悼词
2015/06/23 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
导游词之桂林
2019/08/20 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技