antd 批量修改 FORM表单 却始终只获取到最后一个表单属性值

最新推荐文章于 2023-10-10 17:22:48 发布
最新推荐文章于 2023-10-10 17:22:48 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/88070867
版权

今天在前人的基础上搞一个批量修改，用的antd，由于前人是封装的单个Form表单，我在外部增加了个map循环遍历出多个表单，出现了个问题：无论选中哪些修改项，最后取值准备作为修改接口的json字段时，总是只能获取到最后一个表单的内容，Why?是闭包吗？  最后捣鼓了一下午，发现，NO，其实是因为我把数据存在了一个对象a里，后来我在map循环里，每次push一个a对象，而正确的做法是直接push map的item项就可以了，然后在通过父组件传过来的方法回传过去。

有些问题，出现的很奇怪，到解决的时候都感觉莫名其妙。。。

附：antd的Form表单 获取值的方法是 form.getFieldValues()

hzxOnlineOk
关注
专栏目录
EasyUI的Combogrid 多选项 通过Form表单提交，后台只能获取最后一个值的解决办法
小小德尔(C#)
08-06 1300
之前用在ASP.NET MVC 框架下使用EasyUI开发系统，在开发过程中一直没有使用过combogrid的多选项（multiple）。所以一直也没遇到这个问题； 在combogrid的multiple参数为true的情况下（多选），通过easyui的$('#fm').form('submit')方法提交form表单时，后台只能获取到combogrid的最后一个选项值； 前端代码： <form id="form1" method="post"> <div style.
用form表单实现一键批量增、删、改功能
yqwwj001的博客
12-15 2655
前台页面： 模板用的是smatey Document $(function(){ $("#add").click(function(){ $(this).parent().parent().before('') }) $("#de
antd 表单通过form.getFieldsValue获取不全tabs组件下表单数据的问题
程展威的博客
10-24 2797
解决获取tabs下表单不全问题
解决自定义 Antd Form 表单控件 获取值的问题
weixin_44891495的博客
12-26 1388
antd form表单控件获取值的问题
Form中组件的遍历
波波的专栏
03-19 578
  for i:=0 to Self.ComponentCount -1 do Begin if Self.Components[i] is TButton then (Self.Components[i] as TButton).Caption := 'Component :Button; end; for i:=0 to Self.ControlCount -1 do Begin if Self.Controls[i] is TButton th
解决antd Form 表单校验方法无响应的问题
01-18
里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼...
antd Form组件方法getFieldsValue获取自定义组件的值操作
01-18
补充知识：Ant Design Pro，用setFieldsValue方法，给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值 其实用setFieldsValue或者获取setState方法都可以设置DatePicker的默认值。 但是关键点在于，引用...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在Vue.js应用中，我们经常需要处理添加和编辑数据的功能，而这些操作通常会使用到同一个表单。在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑...
form表单中什么隐藏属性可以随表单提交
09-28
form表单中隐藏属性的使用可以帮助开发者控制哪些数据需要被提交，哪些数据不需要用户直接可见，但依然可以随表单一起发送到服务器。了解隐藏属性在form中的应用对于掌握Web表单的高级使用非常重要。 首先，我们...
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入...
antd Form shouldUpdate 关联展示 form 数组赋值
最新发布
想做大牛的蜗牛
10-10 1108
antd Form shouldUpdate使用，form数组赋值
解决问题:form表单提交复选框数据, 只收到最后一条数据
code wars
04-09 6288
&lt;form action="" method="post"&gt; &lt;input type="hidden" name="group_id" value="{$group_id}"&gt; &lt;volist name='pandas' id='panda'&gt; &lt;tr&gt;
react +antd实现 点击区域外触发隐藏该区域
Hero_孙的博客
12-25 1431
使用到的是 e.nativeEvent.stopImmediatePropagation(); 在构造方法中设置点击所有区域触发的事件 document.onclick = () => this.hideTree(); hideTree() { this.setState({isShowTree: false}); } 点击icon的区域,显示tree, 点击icon之外的区域, 隐藏tree &l...
隐藏域的作用
低调走过
07-23 7116
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。代码格式：＜input type="hidden" name="..." value="..."＞属性解释：type="hidd
Ant Design的表单onChange阶段不更新踩坑，以及修改表单值方法
热门推荐
有问题 ! 请留言 !
01-08 3万+
Ant Design的表单onChange踩坑 新项目中使用antd-pro框架，所以接下来会写一些关于antd-pro的踩坑 在写项目中，中有一个需求是在某个表单元素变化时，出发表单提交，但是发现一个问题是，将方法绑定onChange的时候发现此时通过表单方法获取的值还没有更新，不知道这个属于一个bug，还是在这个阶段本来就没有变更表单的values ，所以我是在onChange绑定的方法中手动...
react+antd系列之Form表单(1)：添加与删除
菜鸟搬砖记
11-12 1万+
在用antd的时候，我们如果要对表单进行添加和删除该怎么弄呢，如下： import { connect } from 'dva'; import { Form, Input, Button } from 'antd'; import styles from './eg1.css'; const FormItem = Form.Item; function Page(props) { con...
使用react16.4.2 + antd 3.x 开发中 遇到的一些问题，和解决方法
城里俊男多博客
07-02 9185
1.在做一个新增页面antd的DatePicker组件报错，导致页面第一次添加成功，第二次新增页面无法打开 错误信息： debugger发现提交成功后，是这个value.locale方法报错undefined引起的一系列问题 value传入的是个字符串 但是initialValue是传入的moment对象 后来花了半天时间才找到问题，提交的时候调用了setFieldsValue这里又重新set了一次value，子组件点击提交，会立即render一次，这时候的date值还是提交之前format过的st
ant-design form组件属性汇总
一只小绵羊
03-20 1万+
简单粗暴，条理清晰，加载快，方便随时查看
antd-mobile form表单怎么获取值
07-15
您可以使用 Antd Mobile 中的 Form 组件来获取表单的值。具体步骤如下： 1. 首先，将需要获取值的表单项包裹在 `Form` 组件中，并为每个表单项设置一个 `name` 属性，以便后续获取对应的值。 ```jsx import { Form, Input } from 'antd-mobile'; <Form> <Form.Item name="username"> <Input type="text" placeholder="请输入用户名" /> </Form.Item> </Form> ``` 2. 在需要获取表单值的地方，通过 `Form` 组件的 `getFieldValue` 方法来获取具体表单项的值。例如： ```jsx import { Form } from 'antd-mobile'; const MyComponent = () => { const [form] = Form.useForm(); const handleFormSubmit = () => { const values = form.getFieldsValue(); console.log(values.username); // 获取用户名表单项的值 }; return ( <Form form={form}> <Form.Item name="username"> <Input type="text" placeholder="请输入用户名" /> </Form.Item> <button onClick={handleFormSubmit}>提交</button> </Form> ); } ``` 通过以上步骤，您可以在点击提交按钮时获取到表单项的值，并进行相应的处理。请注意，上述代码使用了 Antd Mobile 的 Hooks API `useForm` 来创建和管理表单实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值