antd表单回显

2023-05-16

一、利用initialValue(适用于初始化固定的值)

Form 的 initialValues 与 Item 的 initialValue 区别?

在大部分场景下,我们总是推荐优先使用 Form 的 initialValues。只有存在动态字段时你才应该使用 Item 的 initialValue。默认值遵循以下规则:

1、Form 的 initialValues 拥有最高优先级

2、Field 的 initialValue 次之 *. 多个同 name Item 都设置 initialValue 时,则 Item 的
initialValue 不生效 被设置了 name 属性的 Form.Item 包装的控件,表单控件会自动添加 value(或
valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form
接管,这会导致以下结果:

	1、你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange), 但还是可以继续监听 onChange 事件。
	2、你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。
    3、你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。

如果说我们需要回显某一条数据的动态值,需要使用下面的方式⬇️

2 使用setFieldsValue

setFieldsValue是form实例的一个方法,可以用来设置表单的值,其参数为k-v格式的对象,其中k对应form表单中的name,v表示你想设置的值。

form.setFieldsValue({
	userName:'shine',
	passWord:'xxx'
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

antd表单回显 的相关文章

随机推荐

  • PX4 EKF中的多传感器融合方法

    文章目录 1 滤波方法及状态预测1 1 EKF 滤波方程1 2 KF 滤波方程1 3 PX4中的状态量及其预测1 3 1 状态量1 3 2 姿态四元数一步预测1 3 3 速度 位置一步预测1 3 4 协方差阵预测 2 磁三轴数据融合2 1
  • PX4利用matlab推导生成 EKF中雅可比矩阵的方法

    文章目录 一 Matlab的Symbolic Maths Toolbox是什么二 PX4 EKF中需要的雅可比矩阵三 Matlab脚本解析参考来源 PX4实际使用了Matlab的Symbolic Maths Toolbox来进行雅可比矩阵的
  • 如何在linux下编译RTKLIB(实时RTK程序rtkrcv)

    文章目录 一 RTKLIB Demo5代码下载二 RTKLIB的makefile三 编译rtkrcv 欢迎关注个人公众号 xff1a 导航员学习札记 前段时间看到rtklibexplorer发表的博客raspberry pi based p
  • 推荐关于PX4 ECL EKF方程推导的两篇“宝藏“文章

    文章目录 一 PX4 的 ECL EKF 公式推导及代码解析 by 赵祯卿二 PX4 的 ECL EKF2 方程推导 by shuyong chen PX4的ECL EKF开源代码已经比较广泛地应用到很多无人机飞控项目中 该开源项目可以融合
  • js用冒泡解释回调函数

    回调函数的概念 就是自己定义一个函数 xff0c 然后再调用 从而实现这个函数的程序内容 xff0c 然后把这个函数作为另一个函数的参数传入 js代码会至上而下一条线执行下去 xff0c 但是有时候我们需要等到一个操作结束之后再进行下一个操
  • 跨域的解决方案(反向代理)

    反向代理 在前后端分离开发的场景 xff0c 前端有个服务器 xff08 提供页面 xff09 后端也有个服务器 xff08 提供接口 xff09 1 开发环境 xff0c 前端要连后端的接口 xff0c 就会出现跨域问题 2 生产 xff
  • React路由传参常见的几种方式

    React路由传参 解释 xff1a 路由传参完成的是组件之间的数据传递 xff08 组件传值 xff09 1 xff09 params 路由配置 xff1a span class token operator lt span Route
  • React路由里exact和switch的区别

    React路由里exact和switch的区别 exact属性 react的路由匹配默认是模糊的 xff0c 包容的 xff0c 如果想使用严格匹配 xff0c 那么 xff0c 把Route组件的exact属性设置为true span c
  • React路由提供常用组件的详解

    路由提供组件的详解 组件及其作用 xff1a 组件作用路由模式BrowserRouter约定模式 为 history xff0c 使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步路由模式HashRouter
  • 使用Microsoft Visual Studio 2013 自带nmake工具出现NMAKE : fatal error U1077错误

    最近在研究Git上一个打开串口的项目 xff0c 名叫jSerialComm xff0c 地址https github com Fazecast jSerialComm 根据项目README md的指导 xff0c 进行到build阶段遇到
  • 前端将json数据和动态数组数据转换为Excel文件下载

    https blog csdn net friend ship article details 100582537
  • github在项目中使用的过程,包括账号的创建,密钥的查看

    项目中使用github的过程 xff0c 包括账号的创建 xff0c 密钥的查看 官网 xff1a https github com 1 注册账号和密码 2 创建好了之后 xff0c 新建一个仓库 3 填写仓库名称及说明 xff0c 创建仓
  • vscode中使用git,超级无敌简单

    vscode中使用git xff0c 超级无敌简单 一 复制远端地址 https gitee com zhaojia77 react foot git 二 打开vscode 1 点击源代码管理 2 点击克隆存储库 3 输入框里粘贴上你的远端
  • mongodb的安装及使用,增删改查的基本命令

    mongodb的安装及使用 xff0c 增删改查的基本命令 1 先安装MongoDB 2 在安装可视化工具 Robo 3T 1 3 1 3 找到安装MongoDB目录 xff0c 进入bin目录打开命令行 4 先在f盘创建一个data文件夹
  • Vue的官方指令

    Vue的官方指令 插值表达式 xff08 xff09 内容指令 xff08 v text和v html xff09 相同点 xff1a 都是可以让html标签里的内容变成动态的 不同点 xff1a v text和 相当于innerText不
  • 阿里OSS上传文件的两种方式的详解

    阿里OSS上传文件 一 为什么要使用云存储 xff1f 1 存储费用低 xff0c 不占用服务器的磁盘空间 2 流量费用低 xff0c 上传或下载不占用服务器带宽 二 怎么使用云存储 xff1f 方法一 xff1a javascript客户
  • antd设置表单的某个字段的值

    antd设置表单的某个字段的值 1 创建form的实例 const span class token punctuation span formObj span class token punctuation span span class
  • 数组去重,并且数组的每一项是对象object

    span class token keyword function span obj2key span class token punctuation span obj keys span class token punctuation s
  • javascript函数声明和函数表达式的区别

    一 首先它们写法不一样 xff0c 我们先写一个函数声明 函数表达式的dome span class token comment 1 函数声明 span span class token keyword let span ceshi1 sp
  • antd表单回显

    一 利用initialValue 适用于初始化固定的值 Form 的 initialValues 与 Item 的 initialValue 区别 xff1f 在大部分场景下 xff0c 我们总是推荐优先使用 Form 的 initialV