Ant ProForm设置多余数据问题

已于 2023-12-11 13:32:06 修改
阅读量111 收藏
点赞数
文章标签： 前端 ant
于 2023-11-17 10:58:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33715850/article/details/134458137
版权

业务场景：在formRef.current?.setFieldsValue 时候需要设置多余字段id，用于编辑更新上送给后端。

1. 正常情况ProForm会自动过滤掉多余字段，比如设置{a:10,b:20},如果name为b的标单项没有在ProForm里面，那么在触发onFinish时候拿到的值里面是没有b字段的。

2 . 情况1虽然会过滤最外层多余数据，但是多余内部嵌套数据对象结构，ProForm则不会过滤，比如setFieldsValue设置{a:{age:10,id:1}}，虽然ProForm表单项中没有嵌套id字段只有age字段，但是在触发onFinish时候是可以拿到a对象里面的id字段的。

 推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩

头像为自己开发微信小程序
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ant design pro动态菜单
03-30
Ant Design Pro提供了相应的API来支持这些功能，如`defaultSelectedKeys`和`defaultOpenKeys`可以设置初始选中和展开的菜单项。 此外，动态菜单还涉及到路由的配置。在Ant Design Pro中，通常会结合`@umijs/plugin-...
Ant Design Pro(5)-6.高级表单ProForm
AG.『Feng』的博客
10-18 4768
PrForm表单使用
Antd Pro的组件ProForm
weixin_67150966的博客
05-24 564
表单的布局：横排，竖排等。
AntD Pro Form动态绑定数据，initialValues动态数据
飞扬小阁
12-16 3152
常用于列表数据编辑场景 * Modal属性destroyOnClose需为true，销毁 * Form属性initialValues={props.values}绑定数据 props为父组件参数 <Modal width={640} destroyOnClose title='配置' visible={props.visible} onCancel={() => { props.onCancel();
Antd ProV5 设置ProForm选项值-formRef
飞扬小阁
01-24 4558
Antd ProV5 设置ProForm选项值（场景：select选项涉及联动，onchange时要把子联动value清空） 关键点：formRef ProForm - 高级表单 - ProComponents???? 让中后台开发更简单 包含 table form 等多个组件。https://procomponents.ant.design/components/form#formref 主要看'一键填写'onFill，setFieldsValue某一项的值。 import React, {
ant design pro v5 之 ProForm自定义表单项
无缺的博客
04-24 6950
需求背景：ProForm 默认提供的表单项无法满足项目开发 解决方案：ProForm本身是在原来的Ant Design Form 的基础上增加一些语法糖和布局设置等等，那我们就看看ProForm是如何做的不就行了 了解之后得知：ProForm的表单代码是通过如下方式来创建的： const ProFormText = (props) => { return ( <ProForm.Item {...props}> <Input placeholder={p
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
AntDesignPro开发手册.doc
12-13
AntDesignPro 项目的目录结构包括 mock 本地模拟数据、public 共共资源、src 源代码、tests 测试工具、README.md 项目说明、package.json 项目配置文件等。其中，src 目录下还包括 assets 本地静态资源、common 应用...
二次封装 ant-pro +ProFormSelect
weixin_47338877的博客
02-28 847
二次封装 ant-pro +ProFormSelect 封装了ant-pro +ProFormSelect。 拓展了一些功能，如格式化，下拉搜索关键字为红色，下拉框过滤等。 类型声明文件位置 import { ProFormSelect } from '@ant-design/pro-form'; import type { ProFormSelectProps } from '@ant-design/pro-form/lib/components/Select'; import type { Fiel
ant-pro使用Form表单验证上传图片出现的问题
weixin_30216561的博客
03-08 356
1、复现：用antd的Form表单验证上传图片必填项时出现问题：复现过程，先提交，提示图片需要上传，上传成功后，依旧提示：图片未上传 2、表单验证原理：先理解一下antd的Form表单验证的表层原理，每个表单getFieldDecorator配置项都有个名字，比如就叫goodsSkuImg，这个goodsSkuImg对应this.props.form.goodsSkuImg如果为空则验证不通过。...
const {} = this.props;的写法es6写法理解
热门推荐
qlin_11的博客
06-08 2万+
const {dispatch} = this.props; 这段代码你可以认为是这样： const dispatch = this.props.dispatch; 那样写是 ES6 的简写形式。
antd-pro下的form使用注意事项
百岁如流富贵冷灰的博客
12-18 6790
好久没有更新博客，因为有了新的任务，我负责全部的页面开发，有点心累。。。 正题开始： antd-pro下的表单如果使用了getFieldDecorator函数对表单项进赋值的话，那么你是无法通过直接设置value来控制表单的值得，例如： &lt;Input placeholder="请输入" value='XXX' /&gt; // 此时赋值会失败，并且控制台会打印错误 解决方法： 1...
antd pro ProForm 去除自动填充不生效
小子宝丁的博客
09-26 2885
`Antd Pro` 中`ProFormText` 和 `ProFormText.Password` 时`autoComplete` 不生效的问题
ant design pro 表单默认值
idwtwt的专栏
10-28 7320
调试时免去频繁输入值可以设置输入框默认值，设置initialValue： &lt;FormItem&gt; {getFieldDecorator('mail', {initialValue: '279277203@qq.com', rules: [ { r...
react-umi-2-4.登录页
echo_Ae的博客
12-07 578
(⊙o⊙)…也确实没有设计天赋。。。登录页有点丑。 index.tsx import React from 'react'; import { history } from 'umi'; import { message } from 'antd'; import ProForm, { ProFormText } from '@ant-design/pro-form'; import { UserOutlined, LockOutlined } from '@ant-design/icons';
antdesignpro form store 的缓存问题
最新发布
06-13
Ant Design Pro的表单存储方案默认没有缓存功能，但是您可以使用第三方的缓存库来实现表单数据的缓存。例如，您可以使用LocalStorage或SessionStorage来缓存表单数据，这样可以避免用户在刷新页面或关闭浏览器时丢失...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值