解决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 相关文章推荐
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
微信小程序自定义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
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
js实现烟花特效
2020/03/02 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
详解vue v-model
2020/08/31 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python实现AES加密与解密
2019/03/28 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
Shell编程面试题
2016/05/29 面试题
继电保护工岗位职责
2014/01/05 职场文书
美发活动策划书
2014/01/14 职场文书
研究生导师推荐信
2014/09/06 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
个人政治思想总结
2015/03/05 职场文书
城南旧事读书笔记
2015/06/29 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python