首页 > 其他分享 >Antd Form 表单数据没法回显问题

Antd Form 表单数据没法回显问题

时间:2023-11-06 16:12:09浏览次数:32  
标签:initvalue Form 回显 表单 组件 Antd 数据

Antd Form 表单数据没法回显问题

antd环境

4.*版本

问题复现

在一个组件中,给这个组件传递一个配置项,展示一些表单组件如 输入框、下拉框等组件,再传递一个数据,让其数据回显在我们的表单组件中

 // 就正常一个表单,里面通过循环配置项展示formitem 里的内容,我们可以在formitem中设置initvalue来给这个表单赋值,也可以通过给那些组件中设置value来给这个表单赋值,但是由于我们的表单数据是hook传递的,initvalue原理在表单初始化的时候给表单赋值,且这个initvalue必须是同步数据,不能为hook数据,因为setstate 是异步的,官方原话
  1. 你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange),但还是可以继续监听 onChange 事件。
  2. 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。
  3. 你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。

怎么解决这个问题呢?只能通过setFieldsValue?

我们可以给组件加一个loading态,当我们的数据还没准备好的时候不要让其加载我们的表单组件

    <MyRoutes
        confgi={...}
        data={...}
        loading={...}
    />

    // 组件中可以这样
    if(loading){
        return (<div>loading</div>)
    }
    return <div>我们的表单组件</div>
 

标签:initvalue,Form,回显,表单,组件,Antd,数据
From: https://www.cnblogs.com/gjzsa/p/17812973.html

相关文章

  • JS对象文档 - FormData
    前言FormData接口提供了一种表示表单数据的键值对key/value的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send()方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为"multipart/form-data",它会使用和表单一样的格式。正文构造函数constformDat......
  • 2023-8-24 Pyramid Vision Transformer 2023人工智能大会青年科学家论坛
    PyramidVisionTransformer|2023人工智能大会青年科学家论坛王文海香港中文大学首次将多层次金字塔结构引入视觉变化网络研究动机|方法|感受野,模型权重->表征能力|结构输出->适用面||----|--------------------------|----------------||CNN|局......
  • 互信息(Mutual Information)的介绍
    互信息指的是两个随机变量之间的关联程度,即给定一个随机变量后,另一个随机变量不确定性的削弱程度,因而互信息取值最小为0,意味着给定一个随机变量对确定一另一个随机变量没有关系,最大取值为随机变量的熵,意味着给定一个随机变量,能完全消除另一个随机变量的不确定性。 互信息(MutualI......
  • 通过@JsonFormat和@DateTimeFormat,解决前后端时间格式问题
    在domain层的时间属性上面加@JsonFormat和@DateTimeFormat注解后端传前端:GMT+8:表示东八区@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")前端传后端:@DateTimeFormat(pattern="yyyy-MM-ddHH:mm......
  • 通过@JsonFormat和@DateTimeFormat,解决前后端时间格式问题
    在domain层的时间属性上面加@JsonFormat和@DateTimeFormat注解后端传前端:GMT+8:表示东八区@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")前端传后端:@DateTimeFormat(pattern="yyyy-MM-ddHH:mm......
  • 轻松理解 Transformers (3): Feed-Forward Layer部分
    编者按:随着人工智能技术的不断发展Transformer架构已经成为了当今最为热门的话题之一。前馈层作为Transformer架构中的重要组成部分,其作用和特点备受关注。本文通过浅显易懂的语言和生活中的例子,帮助读者逐步理解Transformers中的前馈层。本文是Transformers系列的第三篇。作者的观......
  • 论文阅读:Transformer for 3D Point Clouds
    Transformerfor3DPointClouds摘要深度神经网络被广泛用于理解三维点云。在每一个点卷积层,特征从三维点的局部邻域计算出来,并结合起来进行后续处理,以提取语义信息。现有的方法在整个网络层中采用相同的单个点邻域,由固定的输入点坐标的相同度量定义。这种常见的做法很容易实现,但......
  • 在Winform中通过LibVLCSharp回调函数获取视频帧
    参考资料:VlcVideoSourceProvider优点:实现视频流的动态处理。缺点:视频解码(CPU/GPU)后图像处理CPU占用率高。在Winform中通过LibVLCSharp组件获取视频流中的每一帧图像,需要设置回调函数,主要是SetVideoFormatCallbacks和SetVideoCallbacks,其定义如下所示:///<summary>///Setde......
  • Winform中使用Log4Net实现日志记录到文件并循环覆盖
    场景log4nethttps://logging.apache.org/log4net/TheApachelog4netlibraryisatooltohelptheprogrammeroutputlogstatementstoavarietyofoutputtargets.log4netisaportoftheexcellentApachelog4j™frameworktotheMicrosoft®.NETruntime.We......
  • Angular Form 的一些问答
    AngularForm的一些问答如何理解FormGroup,FormArray,FormControl?它们可以映射成对象,数组,原生字段FormGroup上的invalid字段是如何获取整个表单的状态的?首先,它的状态是存在于它内部的Status字段。其次,每单它内部的一个节点有值的改动,会调用updateValueAndValidity()方......