解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题


Posted in Javascript onOctober 29, 2020

场景描述:

如下图所示,点击减免天数会出现一个弹窗, 输入天数后点击确定,保存这个值, 但是我在点第二行的减免天数的时候初始应该是空的, 可是现在显示的是第一行输入的值;

解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

<Modal
 title="减免天数"
 visible={that.state.visible}
 onOk={that.handleOk.bind(that)}
 onCancel={that.handleCancel}
 >
 <Form horizontal form={form}>
 <FormItem {...{labelCol: { span: 5 }, wrapperCol: { span: 16 }}} label="减免天数:">
 <InputNumber min={0} step={1} {...{style: {width: 120}}} {...getFieldProps('currValue',{

 initialValue: that.state.currInputValue,

 rules: [
  {required: true,message:"减免天数不能为空"}
 ]
 })} />
 </FormItem>
 </Form>
</Modal>

问题分析:

当我们第一次点开Modal的时候, FormItem会得到一个initialValue,但是这个值只在组件挂载的时候执行了一次, 当我们再次打开Modal窗口的时候并不会更新。

好了发现问题所在了, 接下来就是解决了~

解决方法:

Modal窗口我们都有应用一个Visible来控制是否显示, 我们只要利用这个值得变化就可以实现Modal组件的重新挂载了。

{ Visible && <Modal ....../> }

补充知识: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')

有什么不懂的欢迎各路大神指正,不懂可以留言。

以上这篇解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 #Javascript
解决ant Design Search无法输入内容的问题
Oct 29 #Javascript
js实现随机圆与矩形功能
Oct 29 #Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 #Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 #Javascript
design vue 表格开启列排序的操作
Oct 28 #Javascript
ant design vue导航菜单与路由配置操作
Oct 28 #Javascript
You might like
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python实现的密码强度检测器示例
2017/08/23 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Python内存管理实例分析
2019/07/10 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
车工岗位职责
2013/11/26 职场文书
财务总监管理职责范文
2014/03/09 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
MongoDB支持的索引类型
2022/04/11 MongoDB