解决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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
js替代copy(示例代码)
Nov 27 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
几种响应式文字详解
May 19 Javascript
vue设置全局访问接口API地址操作
Aug 14 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下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
PHP编写简单的App接口
2016/08/28 PHP
php实现数字补零的方法总结
2018/09/12 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
python3中set(集合)的语法总结分享
2017/03/24 Python
Python列表(List)知识点总结
2019/02/18 Python
python操作excel让工作自动化
2019/08/09 Python
简单了解python中的与或非运算
2019/09/18 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
python实现xml转json文件的示例代码
2020/12/30 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
教师党员岗位承诺书
2014/05/29 职场文书
致青春观后感
2015/06/09 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Java字符串逆序方法详情
2022/03/21 Java/Android