问题:

在antd的form表单的api里面有个"initialValues"可以设置默认值.但是表单没有更新

      <Form
name="test"
form={form}
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
initialValues={data} //此处设置"data"为默认值
>
<Form.Item name="name" label="姓名" required={true}>
<Input.TextArea
autoSize={{ minRows: 1, maxRows: 3 }}
></Input.TextArea>
</Form.Item>
</Form>

但是,正如官网所说

表单默认值,只有初始化以及重置时生效

也就是说比如详情页,data为调结果返回的结果,data本身就有默认值,然后接口返回之后更新data值.那么其结果是页面没有更新,详情页form表单在页面上还是空.为啥?

因为"initialValues"只是初始化,所以它只设置了data的原始默认值,而调接口之后虽然data更新了,但是"initialValues"并不会更新.所以表单也不会更新

解决方案:

1.form表单中有另一个api可供选择--setFieldsValue.其功能是更新form表单值.所以,我们只需要监听data值的变化,然后更新form表单值即可.

  useEffect(() => {
form.setFieldsValue(data)
}, [data]);

2.确认data更新之后再渲染页面.

  {data? <Form
name="dataGroup"
form={form}
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
initialValues={data}
>
<Form.Item name="name" label="数据组别" required={true}>
<Input.TextArea
autoSize={{ minRows: 1, maxRows: 3 }}
></Input.TextArea>
</Form.Item>
</Form>:null}

第一次页面并没有渲染东西,但是只要data变化了,页面就会重新渲染一个默认值是data的表单,form表单也就无需更新.

【antd】form表单默认值设置的更多相关文章

  1. 获取form表单默认提交的返回值

    1.经常用form表单提交的小伙伴有没有发现,form表单默认的提交是没有返回值的,而且默认提交成功之后是跳转,跳转的action的路径,下面写一下默认的提交如何获取到form表单的返回值json,并 ...

  2. asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!)

    原文:asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!) 我想用post的方式把一个页面表单的值,传到另一个页面.当我点击Default.as ...

  3. Jquery Form表单取值

    之前js取form表单的值都是一个一个的取,数量一多之后容易出错而且烦透了.感谢那些愿意分享的人. 页面定义form,并给form指定id值,里面的元素只要是需要键值对应的都赋予name属性,并且na ...

  4. 取值:form表单取值、input框绑定取值

    1. form表单取值1.1 方式一,通过<form bindsubmit="formSubmit">与<button formType="submit ...

  5. 如何为form表单的button设置submit事件

    若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交

  6. 5 获取Form表单取值

    #form表达提交@app.route("/data",methods=['GET','POST']) #methods 让当前路由支持GET 和 POST 方式def data( ...

  7. antd 父组件获取子组件中form表单的值

    还是拿代码来讲吧,详情见注释 子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; con ...

  8. 关于antd form表单getFieldsError方法

    getFieldsError()方法其实只有required:true时,双向数据绑定. {getFieldDecorator('note', { rules: [{ required: true, ...

  9. form表单编码方式设置为multipart/form-data,后台参数出现乱码情况

    一般在上传图片过程中,form中的编码方式一般采用multipart/form-data方式编码,但是后台这取参数时,可能会出现乱码情况:这里后台要采用转换编码方式: 页面: 后台:获取表单元素时,

随机推荐

  1. .net工程师学习vue的心路历程(三)

    vue cli3没记错的话是在2019年8月份yyx个人正式声明发布. 接下来就开始我们的vue cli3的方式创建vue项目.明白一点,vue cli3遵循的一个原则就是 "0配置&quo ...

  2. [loj3366]嘉年华奖券

    联系绝对值的几何意义/分类讨论,不难发现若$n$张奖券上的数从小到大依次为$a_{i}$,则收益为$\sum_{i=1}^{\frac{n}{2}}a_{i+\frac{n}{2}}-a_{i}$ 假 ...

  3. Vue3学习与实战 · 全局挂载使用Axios

    在vue2中会习惯性的把axios挂载到全局,以方便在各个组件或页面中使用this.$http请求接口.但是在vue3中取消了Vue.prototype,在全局挂载方法和属性时,需要使用官方提供的gl ...

  4. JavaScript中的多种进制与进制转换

    进制介绍 JavaScript 中提供的进制表示方法有四种:十进制.二进制.十六进制.八进制. 对于数值字面量,主要使用不同的前缀来区分: 十进制(Decimal): 取值数字 0-9:不用前缀. 二 ...

  5. 【树莓派】Python开发工控机急停设计

    背景 我们在一些工业产品中使用树莓派替代了PLC和上位机,并借助树莓派的算力将AI和机器视觉引入工业领域. 以前的产品都不存在动作机构,仅仅将结果输出到指示灯.蜂鸣器或者显示器上,没有安全隐患, 现在 ...

  6. AGC050B Three Coins

    做的时候有思考到是否能转化成移动点问题,但是没有清晰的把他解释出来. NOIP的时候也一样,T3也有考虑到是否能转为差分,但是也没有清晰的写出来. 自己做题的时候应尽量保证草稿纸和思绪的清晰,而不是在 ...

  7. CF1463E Plan of Lectures

    考虑我们两种操作: 我们把第一种操作在\(x\to y\)连一条权为-1的边. 第二种操作\(x\to y\)连-1,\(y\to x\)连1的边. 当无法操作则是环里有负环. 否则我们把第二种操作涉 ...

  8. [USACO07NOV]Cow Relays G

    题目大意 给出一张无向连通图(点数小于1000),求S到E经过k条边的最短路. 算法 这是之前国庆模拟赛的题 因为懒 所以就只挑一些题写博客 在考场上写了个dp 然后水到了50分 出考场和神仙们一问才 ...

  9. 洛谷 P6177 - Count on a tree II/【模板】树分块(树分块)

    洛谷题面传送门 好家伙,在做这道题之前我甚至不知道有个东西叫树分块 树分块,说白了就是像对序列分块一样设一个阈值 \(B\),然后在树上随机撒 \(\dfrac{n}{B}\) 个关键点,满足任意一个 ...

  10. 平衡树 & LCT

    1. 非旋 Treap(FHQ Treap) 1.1. 算法简介 FHQ Treap 的功能非常强大.它涵盖了 Treap 几乎所有的功能 所以我非常后悔学了 Treap,浪费时间. FHQ 的核心思 ...