ant-design-ProComponents-ProForm重置表单值

最新推荐文章于 2023-05-04 15:44:00 发布
最新推荐文章于 2023-05-04 15:44:00 发布
阅读量2.6k 收藏 1
点赞数 1
分类专栏： # react-hooks-Umi3 文章标签： ant-design-pro proForm 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45416217/article/details/120344271
版权

1、重置某一表单值，获取表单实例，调用表单方法

  const formRef = useRef();

  const handleSubmit = async (values) => {
    formRef.current.resetFields(['code']);

2、

在这里插入图片描述

前端设计诗
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue的蚂蚁设计 图片编辑 -AntV G2 Viser -Vue的Antv / G2 注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本完全相同。 但您也可以使用npm 项目设置 克隆回购 git clone https://github.com/vueComponent/ant-
Antd form表单的使用、设值、取值、清空值
热门推荐
忘川
05-07 3万+
1、使用 {this.props.form.getFieldDecorator("key",{})(<Input />)} 3、设值 this.props.form.setFieldsValue({ key: '123', }); 2、取值 this.props.form.validateFields((err, values) => { if (...
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
:new_moon_face: 蚂蚁设计黑暗主题 :new_moon_face: Ant Design的深色主题。 仍处于实验阶段，欢迎尝试并帮助我们进行改进。 访问进行预览。 安装 $ npm install @ant-design/dark-theme 用法 import darkTheme from '@ant-design/dark-theme' ; // webpack.config.js: less-loader { loader : 'less-loader' , options : { modifyVars : darkTheme , } , } , 在Ant Design Pro中使用： :
基于vue Ant-Design 的表单设计器，快速开发.zip
05-04
vue基于vue Ant-Design 的表单设计器，快速开发.zip 基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip
基于 umijs + electron + ant-design-pro 的项目模板开发代码
03-12
基于 umijs + electron + ant-design-pro 的项目模板开发代码
antd 表单 校验、取值、重置
wsh2467991332的博客
02-18 6117
上次接触 React 是一年多以前了，再写的时候发现 antd 有了不晓得改动。总结一下。 1. antd 表单取值和校验 ref={this.formRef} 首先要在表单上定义一个 ref。 formRef = React.createRef() 然后在 class 里面定义 formRef. 这个最好定义在比较靠前的位置，这样方便后面要用到的时候不会出现引用错误。 获取到 form 实例。这个地方代码我截掉了用不到的一段，这个 val 就是拿到的合法表单值。记得要写 catch
antd重置表单
淘淘小窝
08-12 1495
let formdata = this.form.getFieldsValue(); Object.keys(formdata).forEach((key) => { formdata[key] = this.data[key]; }); this.form.setFieldsValue(formdata)
ProComponents表单
momo66_的博客
09-29 829
表单数据回显 const [updatedValues,setUpdatedValues]=useState({}); //然后写一个方法动态获取数据，更新updatedValues <ProForm initialValues={updatedValues} params={updatedValues} request={(params) => { return Promise.resolve({ data: params, success: t
vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】
XSL_HR的博客
12-31 1万+
ant design vue组件库中的form表单有一个自带的重置函数——resetFields()。本期文章将借助resetFields函数，实现form表单的重置与清空。
React + Ant Design 4.X版本表单Form数据回显、重置表单、获取表单某一项的值、获取整个表单的值
你是我修复不了的bug，但我会用一生去维护
11-23 4653
React + Ant Design 4.X版本表单Form数据回显、重置表单、获取表单某一项的值、获取整个表单的值 由于 4.x版本弃用了3.x中的Form.create()高阶函数，这里我们使用ref。下面的是使用以前老的ref的声明，以及使用，这里只是作为展示，不推荐使用。 给From表单添加ref属性，假设这里设置的ref=“addForm” 在满足条件的时候，通过下列方法做不同的事 ①表单数据回显（设置值） this.refs.addForm.setFieldsValue({name: ‘xxxx
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant-design-vue-pro-master.zip
08-20
ant-design-vue-pro-master之前版本的源码，该版本支持多页签，实现页面页签显示，返回不刷新。新版本代码改动较大，此版本慎用，可参考多页签的实现方式；
ant-design-pro-cli:Ant Design Pro的cli工具
05-30
npm i @ant-design/pro-cli # or yarn add @ant-design/pro-cli Commands screenshot 对区块进行截图 i18n-remove 从项目中移除国际化 fetch-blocks 下载 pro 所有的官方区块 Options for the screenshot command --...
Antd中设置 Form 初始值和清空Form表单输入框（转）
Lucky小黄人的博客
05-04 2820
转自：Antd中清空Form表单输入框 设置 Form 初始值 法一：在 <Form.Item> 使用 defaultValue 设置默认值(一般没用) 法二：在 组件的 initValue 中设置初始值，但是注意每个字段的初始值必须是常量，不能是 state 状态 法三：通过 useEffect() 在页面渲染前设置 form 表单项的值 比如 useEffect(() =&gt...
antd-vue的modal内置表单重置原始值
qq_44242707的博客
05-31 2211
1.第三方库版本 Vue3.0，Antd3.2 2.针对情景 modal内嵌表单作为组件进行引入，多个入口对modal进行复用 modal内表单根据入口传入值进行初始化，再次打开后根据入口的值进行初始化 3.关键属性 destroyOnClose：modal属性，关闭modal时销毁子元素 resetFields：表单重置函数，重置值以及校验状态等 4.逻辑解析 核心代码 // 数据改变时修改表单值 watch( () => props.record, (n,o) =>
antd form表单——重置方法不生效——基础积累——prop的重要性
yehaocheng520的博客
07-22 3651
antd form表单——重置方法不生效——基础积累——prop的重要性
react中使用antd的表单重置数据
zoepriselife316的博客
08-19 9864
resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会重置为initialValue 使用： //这个事件，可以是click可以是生命周期函数，具体看需求 componentWillUnmount() { this.props.for...
antd v4版本From表单使用resetFields重置表单数据
qq_15905635的博客
02-16 5240
一、给From表单一个ref属性标识 <Form ref={this.formRef}></Form> 二、创建form表单实例 formRef = React.createRef() 三、在需要重置表单数据的地方调用resetFields方法 this.formRef.current.resetFields()
JavaScript_构建您的第一个移动应用程序.zip
最新发布
05-20
JavaScript
ant-design-vueForm表单自定义校验规则
07-20
在 ant-design-vue 中，可以通过自定义校验规来进行表单的验。下面是一个简单的示例： 1. 首先，你需要在你的表单组件中引入 `Form` 和 `FormItem` 组件： ```vue <template> <a-form :form="form"> <a-form-item label="用户名" :colon="false" :validateStatus="getValidateStatus('username')" :help="getHelp('username')"> <a-input v-decorator="['username', { rules: [{ validator: validateUsername }] }]"></a-input> </a-form-item> <a-form-item> <a-button type="primary" @click="submit">提交</a-button> </a-form-item> </a-form> </template> <script> import { FormModel, Input, Button } from 'ant-design-vue'; export default { components: { 'a-form': FormModel, 'a-form-item': FormModel.Item, 'a-input': Input, 'a-button': Button, }, data() { return { form: this.$form.createForm(this), }; }, methods: { validateUsername(rule, value, callback) { // 自定义校验规则 if (value && value.length < 5) { callback(new Error('用户名长度不能小于5个字符')); } else { callback(); } }, getValidateStatus(name) { const { getFieldError, isFieldValidating } = this.form; if (isFieldValidating(name)) { return 'validating'; } else if (getFieldError(name)) { return 'error'; } else { return ''; } }, getHelp(name) { const { getFieldError } = this.form; return getFieldError(name) || ''; }, submit() { this.form.validateFields((err, values) => { if (!err) { console.log('校验通过', values); } }); }, }, }; </script> ``` 在上述示例中，我们定义了一个表单，其中的用户名字段使用了自定义的校验规则 `validateUsername`。在 `validateUsername` 方法中，我们可以自定义校验逻辑，并通过 `callback` 返回校验结果。当校验不通过时，`callback` 的参数为一个 `Error` 对象，可以指定错误信息。在 `a-form-item` 组件中，我们使用了 `:validateStatus` 和 `:help` 属性来显示校验状态和错误信息。 注意：在以上示例中，我们使用了 ant-design-vue 的 FormModel、Input 和 Button 组件，请确保已经正确引入这些组件。 这就是在 ant-design-vue 中使用自定义校验规则的方法，你可以根据自己的需求进行相应的定制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值