Proform表单手动刷新

最新推荐文章于 2024-07-10 10:28:12 发布
最新推荐文章于 2024-07-10 10:28:12 发布
阅读量506 收藏
点赞数
文章标签： react.js Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ricale/article/details/128814610
版权

由于Proform是对Form的进一步封装，所以我们可以使用Form的form绑定去实现

首先引入

然后创建和连接表单

最后创建刷新的方法

方法内第一行即可实现表单刷新，第二行是赋初始值

使用setFieldsValue时不需要使用initialValue或者request来使表单接受数据

需要刷新的时候调用刷新的方法即可，但要注意使用不当会出现我上一篇文章的报错，具体可看https://blog.csdn.net/Ricale/article/details/128811375?spm=1001.2014.3001.5501

酱油ooo-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
React实现页面定时刷新
liweiweili126的博客
04-17 2431
如果你使用了类似`window.location.reload()`这样的方法来强制页面重新加载，那么无论是否使用了`count`状态变量，页面都会被重新加载。在这个例子中，我们使用了`useEffect`钩子来在组件挂载时启动一个定时器，在5秒钟后调用`window.location.reload()`方法，强制浏览器重新加载页面。只有在使用`count`的代码中，当`count`更新时，React会重新渲染组件并更新DOM，从而导致页面重新渲染。因此，应该谨慎地使用此方法，并在确保必要时才使用它。
antdpro 中 使用 antd select 组件，defaultValue 与 value 使用问题
超逸の学习技术博客
01-19 1774
背景 简而言之，就是业务需求中虽然使用了 ProTable，但是表格列中有处理人，处理状态等需要下拉框显示的，于是用了 render 方法，结合 antd select 组件来实现。 原本是打算用 ProSelect 的，但是属于 ProForm 里面的组件，直接使用会有样式问题，还是放弃这个做法了。 使用 defaultValue 使用 defaultValue 的时候下拉切换的时候很流畅，当你下拉选择某个值之后，下拉框会先显示那个值然后再去请求接口，这个交互没啥问题。 但是这里有其它问题就是，有这个
ProComponents表单
momo66_的博客
09-29 851
表单数据回显 const [updatedValues,setUpdatedValues]=useState({}); //然后写一个方法动态获取数据，更新updatedValues <ProForm initialValues={updatedValues} params={updatedValues} request={(params) => { return Promise.resolve({ data: params, success: t
Ant Design Vue select下拉列表动态更新选中值
我的博客
12-09 1260
Ant Design Vue select下拉列表动态更新选中值
Ant Design Pro(5)-6.高级表单ProForm
AG.『Feng』的博客
10-18 4739
PrForm表单使用
ProFormSelect和CustomSelect使用Ant Design Pro
シ❤゛甜虾的个人博客
03-03 3815
官方说明 https://procomponents.ant.design/components/field/#%E8%BF%9C%E7%A8%8B%E6%95%B0%E6%8D%AE ProFormSelect 在需要时调用加载 consthandleCreate=(title:string)=>{ request('/api/services/app/AppUpdateFileService/GetAppVersionFileOptions',{ method:'Get'...
Ant Design使用＜Form.Item＞的defaultValue值不能更新的问题
专注基础架构领域
08-26 2050
这个是官方的Bug，改两个东西，一个是在<Form.Item>中加一个唯一key（这个key唯一代表一个组件，名称不能重复），另一个要改的地方是在<Form.Item>下面加一个<input hidder={true} value={default_value}>，然后就可以刷新这个初始默认值了，代码如下： <Form.Item {...field} name={[field.name, item['param_code']]} fieldKey={
proForm高级组件ppt
08-07
`proForm` 高级组件是前端开发中的一个强大工具，尤其在构建复杂表单时，它提供了丰富的功能和灵活性。这个组件库基于`@mosowe2/element`，这表明它可能与流行的前端框架Element UI有关，或者至少在设计上受到了其...
万能表单 亲测可用
03-03
1、支持新建N个表单主题，解决所有表单的应用场景 2、自定义表单模型(自定义字段支持字符串、数字、单选、多选、下拉、日历、时间、邮件、省市区、上传图片)，每个自定义字段支持自定义描述(字段提示)，支持关联会员...
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
01-18
场景描述： 如下图所示，点击减免天数会出现一个弹窗， 输入天数后点击确定，保存这个值， 但是我在点第二行的减免天数的时候初始应该是空的， 可是现在显示的是第一行输入的值； <Form horizontal form={form}> <FormItem {...{labelCol: { span: 5 }, wrapperCol: { span: 16 }
基于Vue的可视化表单设计器vue-form-making设计源码
04-08
vue-form-making表单设计器 - 基于Vue开发，包含438个文件，如JS、VUE、MD、CSS、HTML、WOFF、TTF、EOT、SVG和SCSS等。该设计器提供了一个可视化表单设计功能，通过Vue、JavaScript等技术实现，旨在简化表单开发流程...
防止用户重复提交表单的方法和组件.rar
01-09
好友使用vue技术封装了一个专门用于提交表单和下载文件的“防抖按钮”，其实现原理和使用方法看这里 https://blog.csdn.net/PursueExcellence/article/details/103903139。
vue表单修改值后页面输入框中的没有更新（表单的强制刷新）
qq_38143787的博客
06-09 6306
有的时候我们变化data内的内容，console.log打印的时候是显示已经变化了的，但并没有渲染到界面上去。受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。 深入响应式原理 1.$set()方法重新渲染 this.$set(this.student,"age", 24) 2.深拷贝 let name2 = JSON.parse(JSO
antd pro 表单联动方法
总结，交流，记录，成长
07-04 2854
antd ProFormSelect表单联动官方文档比较难找，我简单整理一下，以官网为准 使用 ProFormDependency 使用dependencies
antd proform中的select（ProFormSelect）使用
bsefef的博客
02-22 1885
<ProFormSelect label="角色可见范围" name="select2" mode="multiple" fieldProps={{//这里使用了select的onChange方法，必须使用这样的写法来进行调用onChange方法 .
Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop
Ricale的博客
01-31 1319
调用 form 方法时， form还没有初始化导致报错
React+ant中的Form表单的刷新
m0_53644435的博客
07-21 2560
我们使用ant组件库的Form表单提交之后不刷新整个页面，表单中的内容有时候是不会刷新，如何解决这个问题？
react 的条件渲染
最新发布
weixin_72324200的博客
07-10 249
可以在 JSX 中使用普通的 JavaScript `if`/`else` 语句来进行条件渲染。在 React 中，还可以使用逻辑 `&&` 运算符进行简单的条件渲染。另一种常见的方式是使用 JavaScript 中的三元运算符来进行条件渲染。有时需要更复杂的条件逻辑，可以使用条件运算符 (`?##### 使用 if/else 语句。##### 使用三元运算符。##### 使用条件运算符。使用逻辑 && 运算符。
antdesignpro ProForm显示图片
06-13
可以通过使用 `ProForm.Item` 的 `render` 属性来自定义表单项的渲染方式，从而实现在表单中显示图片。 以下是一个使用 `ProForm.Item` 自定义表单项渲染方式来显示图片的示例代码： ```jsx import { ProForm, ProFormText } from '@ant-design/pro-form'; import { Upload } from 'antd'; const MyUpload = () => { return ( <Upload> <Button icon={<UploadOutlined />}>Upload</Button> </Upload> ); }; const MyImage = ({ value }) => { return ( <img src={value} alt="preview" style={{ maxWidth: '100%', maxHeight: '100%' }} /> ); }; const MyFormItem = ({ name, label, rules, render }) => { return ( <ProForm.Item name={name} label={label} rules={rules} render={render} /> ); }; const MyForm = () => { return ( <ProForm> <MyFormItem name="name" label="Name" rules={[{ required: true }]} render={() => <ProFormText />} /> <MyFormItem name="avatar" label="Avatar" render={() => <MyImage />} rules={[{ required: true }]} /> <MyFormItem name="upload" label="Upload" render={() => <MyUpload />} rules={[{ required: true }]} /> </ProForm> ); }; ``` 在上面的代码中，我们定义了一个 `MyUpload` 组件和一个 `MyImage` 组件，分别用来处理上传文件和显示图片的逻辑。然后我们又定义了一个 `MyFormItem` 组件，用来自定义表单项的渲染方式。在 `MyFormItem` 组件中，我们通过 `render` 属性来指定表单项的渲染方式，实现了在表单中显示图片的效果。 最后，在 `MyForm` 组件中，我们使用 `MyFormItem` 组件来定义表单项，其中 `name` 属性用来指定表单项的字段名，`label` 属性用来指定表单项的标签名，`rules` 属性用来指定表单项的验证规则，`render` 属性用来指定表单项的渲染方式。通过这样的方式，我们可以实现一个自定义表单项渲染方式的表单，并在其中显示图片。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值