Form动态渲染问题(setFieldsValue)

最新推荐文章于 2024-04-28 11:07:42 发布
最新推荐文章于 2024-04-28 11:07:42 发布
阅读量6.6k 收藏 6
点赞数
分类专栏： Form表单问题 文章标签： react ant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45321059/article/details/115670013
版权

关于Form动态渲染问题

Ant 使用setFieldsValue更新Form表单值（antd4.x）

新手第一次使用ant的form表单，动态渲染表单。发现当state数据改变时，页面表单数据没有变化，百度了一下，发现表单数据不能通过setState改变，要使用setFieldsValue

步骤一：创建一个ref
在这里插入图片描述
步骤二：绑定在Form上
在这里插入图片描述

步骤三：在你需要更新的地方使用以下语句
在这里插入图片描述
在这里插入图片描述
thisname为你要更新的表单项的name，后面为更新的值

上面三步就是一般更新时的操作

But

我这里说的是动态渲染表单，所以name是动态获取的，于是我进行了以下操作
在这里插入图片描述
ids是动态获取的name值,结果出错了，获取不到ids,因为这里的这个名字不能为变量，如果要用变量就要加个[]
在这里插入图片描述

不断成长的小菜狗
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为什么使用Form的ref.current.setFiledsValue()时不了值了?
weixin_39238520的博客
04-01 1941
问题描述：在第一次打开modal时，通过用实例ref设置的值是不生效的 如图，点击修改打开弹窗前，数据，使用的设值方法都是正确的。但是打开的弹窗值为空。 原因如图，经过断点之后，发现ref的实例为undefined，因为第一次使用modal时，此时还没渲染dom节点到dom中，没有实例是很正常的。至于后来的，但是第二次打开之后，可以发现，此时已经正常使用。 下图是第二次点击。 第二次点击结果如下图，可以看到此时是正常的。 解决：第一次使用ref实例，因为还没有dom节点，使用ref当然获取不到实例
解决layui中onchange失效以及form动态渲染失效的问题
10-16
然而，在实际使用过程中，开发者可能会遇到一些意料之外的问题，比如onchange事件失效和form动态渲染失效。本文将详细探讨这两个问题的解决方案。 首先，我们来看`onchange`事件失效的问题。在jQuery中，我们通常会...
详解React antd中setFieldsValu的简便使用
TianXuab的博客
08-27 3272
在上面的代码中，我们首先使用useState钩子创建了一个名为formData的状态变量，用于保存表单字段的值。总结一下，form.setFieldsValue是antd Form组件中的一个方法，用于动态设置表单字段的值。它接受一个对象作为参数，对象的键是表单字段的名称，值是要设置的字段值。它接受一个对象作为参数，对象的键是表单字段的名称，值是要设置的字段值。例如，假设我们有一个包含用户名和密码字段的表单，我们可以使用form.setFieldsValue方法来设置这些字段的值。
Vben useform基础用法
最新发布
muitoprazer的博客
04-28 767
Vben中的useform基础用法
ant-design中form表单的setFieldsValue无效或只有第一次渲染
weixin_57905352的博客
06-14 1555
react ant-design中form表单的setFieldsValue无效或只有第一次渲染
ant-design Form表单setFieldsValue方法不生效
qq_44512894的博客
04-14 1617
但是由于近视度数的表单是根据判断条件来渲染的，这就会导致这个表单还未被渲染的时候，就已经给leftMyopia这个属性赋值了，结果就是其实leftMyopia这个值并没有赋值上，并且控制台还爆出了警告信息。为了解决这个问题，就不用那种条件判断渲染方式了，直接用css样式来控制这个表单是否在当前条件下显示，这样就不会因为表单还为渲染就赋值的问题了，主要也赋值不上，打印出来的是默认值。initialValue为0。
解决Ant Design Vue中form表单项初始值不能动态更新问题
sinat_34241861的博客
04-21 6059
问题出现场景 实际工作项目中需要实现table表格的增改功能，添加与编辑页面使用了form表单填写信息。当添加/编辑页面填写完一次信息并提交后，再次点击添加/编辑按钮，form表单各项值仍为上一次数据的缓存 解决方法汇总 使用 resetFields() 解决，this.form.resetFields() 若form表单中使用 initialValue 给表单各项赋初始值，使用此中方法最合适 ...
ant-design中form表单的setFieldsValue无效
qq_41146515的博客
05-12 6575
使用setTimeout() setTimeout(()=>{ this.form.setFieldsValue({ layerName:this.cardTitle }) },0)
解决antd的Form组件setFieldsValue的警告问题
01-21
记住：setFieldsValue的字段要对应得...在使用setFieldsValue给表单Form的某一个filed赋值时，可能掺杂了非表单控件中的字段，Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段（因为不存在），所以就会报出这
解决使用layui的时候form表单中的select等不能渲染的问题
10-16
今天小编就为大家分享一篇解决使用layui的时候form表单中的select等不能渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue+ElementUI实现表单动态渲染、可视化配置的方法
08-27
Vue+ElementUI实现表单动态渲染、可视化配置的方法 本文主要介绍了使用 Vue+ElementUI 实现表单动态渲染、可视化配置的方法。该方法可以实现动态渲染表单、可视化配置，满足不同场景下的需求。 一、动态渲染的概念...
ant design vue中的a-form表单赋值setFidesValue不生效
jadetii的学习地盘
07-20 2063
在做数据回显时，发现部分字段回显失败，检查所有代码发现都没有问题。后来发现是初始化时候赋值可以过早，ant design vue中的form。
form表单使用setFildesValue 赋值不成功问题
萧萧的博客
08-30 1万+
在使用antdform表单的时候，肯定会使用到它里面的setFieldsValue【赋值】、getFieldsValue【获取值】，两个api，但是小编在使用的过程中遇到一个问题就是使用setFieldsValue赋值，有的时候并不能生效，后面小编查了下这个方法的说明，感觉是小编在初始化的时候赋值有点早了，后面小编在赋值的时候加了一个异步（setTimeout）就好使了。 具体有...
react Ant Design setFieldsValue 无效问题 bug
weixin_39818813的博客
07-20 2454
获取接口数据后，要set到表单中，但是set一直没反应。
antd4中Form组件initialValues设置初始值无效，使用setFieldsValue动态赋值，getFieldsValus动态获取值
热门推荐
前端菜鸡的博客
07-24 1万+
首先说明initialValues这个属性，这个属性antd官方给的是设置Form组件初始值，但是有个问题如果值从后端请求那么initialValues可能会设置不上，如果说用匿名组件的话，修改From组件会导致一系列问题，接下来就是用到了setFieldsValue和getFieldsValus属性 在antd官网中说明form组件不能使用this.setState修改值， 只能通过setFieldsValue来设置， 通过getFieldsValus来获取 首先通过getFieldsValus来动态获取
Vue之set设置数据(修改了数据的值但是页面显示没更新)
Jocelyn_书
07-09 2281
在项目中遇到几次数据本身修改了但是视图数据却没有改变的问题。 原因： 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。 要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。 所以如果你在初始化数据时，data对象里只是声明了某个对象，之后要对这个对象进行添加属性赋值，如果是使用 a = b 这种等号赋值的
fieldset在form中的用法（表单简单实例）
weixin_51472673的博客
01-09 2110
fieldset：对表单进行分组，一个表单可以有多个fieldset。 fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。 ​ <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> ​<form> <fieldset> <legend>个人注
vue数据更新了但是页面不更新的解决方案
博哥的二进制世界
05-28 1957
vue数据更新了但是页面不更新的解决方案背景解决方案 背景 有时候我们会碰到vue的data数据更新了，但是页面上却不更新的情况，这有可能是页面上依赖的data数据层级太深导致。 如下示例： el-option依赖于memberNameOptions[index].arr，即memberNameOptions属于一个数组，而memberNameOptions[index]属于一个对象，对象中的arr属性又是一个数组，数组中的元素又属于对象，这样多层复杂类型的数据，可能会导致vue数据更新，但页面不更新的情况
antd+form，initialValue值变化时不更新
couch potato的博客
05-09 4396
antd3：离开时清除表单数据，用于更新initialValue变化时值得显示 close = () => { this.props.form.resetFields(); } antd4：form.setFieldsValue const [form] = Form.useForm(); cosnt initValues = {xxx:xxx,...} form.setFieldsValue(initValues) ... <Form form={form} i
ModalForm的渲染问题
06-13
ModalForm 是 Minecraft 中的一种界面类型，用于显示一个模态对话框，通常用于显示一些需要玩家操作的提示或者选择。如果你在渲染 ModalForm 时遇到了问题，可能是由于以下原因： 1. 没有正确设置 ModalForm 的标题、内容和按钮信息。 2. 没有正确设置 ModalForm 的按钮回调函数，导致玩家无法正确地进行操作。 3. 渲染时没有正确设置 ModalForm 的位置和大小，导致显示不完整或者被其他元素遮挡。 解决这些问题需要仔细检查代码，确保所有参数都正确设置，并且在渲染时考虑到 ModalForm 的位置和大小。同时，建议参考 Minecraft 中已有的 ModalForm 代码，以确保你的代码符合 Minecraft 的界面规范。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值