React antd Design4x 版本 form表单如何进行清空

最新推荐文章于 2026-03-27 11:15:39 发布
原创 最新推荐文章于 2026-03-27 11:15:39 发布 · 1.5k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
前端开发

当前文章被收录于：

前端开发
15 篇文章 1 人学习
订阅专栏 查看详情
React

当前文章被收录于：

React
11 篇文章 0 人学习
订阅专栏 查看详情
在将Ant Design Form从3.x升级到4.x时，可能会遇到表单清空的问题。文章作者分享了在Class组件中如何清空表单的解决方法，指出4.x版本中表单的值是通过name属性绑定的，需要在提交时调用特定方法来清空。关键在于使用ref绑定表单，并在提交时针对每个字段执行清空操作。

React antd Design4x 版本 form表单如何进行清空

我在从3版本升级到4版本的时候发现内容改了很多，在点击提交按钮清空表单的时候我发现没有不能像如下这麽用了，网上找了很多方法都不能用，都是form={form}，要不就是hooks版本的就很烦，没有找到我想要的class版本中的，最终在自己的不断尝试下，给搞出来了。在这里插入图片描述

用法如下

antd 4 上面提供的是hooks版本，我用的是class版本写的
请在你的form 表单里这样写：用ref进行绑定，
在这里插入图片看到描述
在这里插入图片描述
4 版本中class表单的值都是name绑定的，
所以当你清空表单的时候需要在你点击提交的时候执行一个方法：
在这里插入图片描述
里面的username就是你<form.Item>里面的name绑定的值，其实我当时就是这搞错了，搞成整个表单的value直接赋值为空了，把你的想要赋值为空的写进去就行了。欢迎留言评论，有不会的可以一起商量

标签
#react
react小练习-antd Form表单和Table表格的交互-Table动态添加数据
m0_46313328的博客
04-22 4837
这里写自定义目录标题功能实现效果代码背景代码思路代码实现 功能实现效果 点击添加按钮，输入表单内容，表单提交后数据动态添加到Table表格里 如图： 初始数据，是在dva的mock文件模拟的死数据 点击添加，输入数据: 表单提交后，数据添加到表格里 代码背景 表单和表格是两个独立的组件，且各自获取后台mock数据 代码思路 在表单设置一个空数组用来存储每次表单提交的数据，将数据加入到原有的初始数据数组中，更新数组 将更新后的数据通过消息订阅与发布机制传递给表格组件，表格组件setState更新数据从而
GAN网络（论文阅读）：Generative Adversarial Nets
m0_54248968的博客
07-14 2268
当判别器效果比较好时，D(G(z))值为0，则log(1-D(G(z)))值为0，当判别器效果不好，会输出一个大于0 的数，则log(1-D(G(z)))值就为一个负数，在极端情况下，会得到负无穷大，此时判别失误。在价值函数的第二项中存在问题，在早期G比较弱的时，生成的数据和真实数据相差很大，D就容易训练的比较好，很容易区分，就会导致log(1-D(G(z)))变成0 ，这样很难求梯度来优化G，所以更新G时，将优化函数改为log(D(G(z)))。最终使G赢，即G生成的数据D判别不出来。
react antd 设置Form表单值 / 清空Form表单 Form.useForm 报错
cc_King的博客
11-19 5948
文章目录错误原因解决办法 （一共三个步骤） 今天使用antd的Form组件时，遇到一个需求，“提交完表单之后需要重置Input框”； 照着手册的方法就一直没有成功。。。比如 const [form] = Form.useForm();这句就没有成功过。。。 错误原因 React Hook "Form.useForm" cannot be called at the top level. React Hooks must be called in a React function component or
告别手动改代码！用SSC工具5分钟搞定EtherCAT从站动态模块配置（含Excel模板）
最新发布
weixin_28339967的博客
03-27 508
本文详细介绍了如何利用SSC工具和Excel模板实现EtherCAT从站动态模块配置的自动化流程。通过零代码修改的动态配置方案，大幅提升工业自动化产线的灵活性和效率，配置时间从平均4小时缩短至8分钟，错误率下降96%。文章包含Excel模板设计、实战演示和避坑指南，助力工程师快速掌握这一高效工具。
React实例1-实现删除操作
Dreamer.
10-08 2809
1.组件下标传递 传递下标就要有事件产生，先来绑定一个双击事件。我们在li标签上绑定一个onClick事件，执行删除操作。 <ul> { this.state.list.map((item, index) => { return <li onClick={this.deleteItem.bind(this, index)} key={index + item}>{item}{index}</li> })
react中的列表渲染 + 删除当前项 （附完整代码）
研究生在读，分享学习日常。（零基础学习后端编程）
01-27 1148
效果展示： 代码展示： import React,{Component} from 'react'; /** * 增加菜单组件 */ class AddMenu extends Component{ constructor(props){ super(props) this.state = { inputVal:'', ...
从零开始学习React——(八)：React列表循环删除某项以及参数传递
qq_19249021的博客
01-11 1112
本节将介绍列表循环时删除其中某项 需求是这样的：点击已经有的选项时，可以进行删除。 1. 数组下标的传递 需要删除其中某项，那么首先就要知道当前点击项的index，也就是下标，然后绑定一个事件。代码如下： // 省略部分代码 <ul> { this.state.list.map((item, index) => { // 此处如果return后面只有一行的话就不需要写括号，如果需要换行就必须写括号 return ( <li ke.
antd Modal和Form结合使用，Modal卸载，Form未清空
spray_wave的博客
08-14 1448
4.x之前的antd版本 Modal设置: <Modal destroyOnClose={true}> Form设置： <Form preserve={false}> 4.x之后的antd版本，两种操作 注：4.x之后的版本加了destroyOnClose也不会起作用 第一种 { visible && <Modal visible={visible}> <Form> .... </Form> &
antd Design中关于Form表单 setFieldsValue 的使用
热门推荐
sky_blue6的博客
08-21 7万+
标题 antd Design Form setFieldsValue的使用 最近项目使用的是antd Design 4.x 版本，碰到个需要加载后端数据并展示，并且用户可以进行修改的需求，前端采用的是antd的Form表单来实现 组件加载的时候向后端请求数据 componentDidMount() { gainCountry().then(res => { // 这里进行数据请求 ...... }) } form表单要回填数据一般会想到的是init
antd4.x版Form组件表单用法
weixin_44824839的博客
04-03 8851
这是antd 4.x版本表单用法 import React, {Component} from 'react' import {Redirect} from 'react-router-dom' import {Form, Input, Button, message} from 'antd' import { UserOutlined, LockOutlined } from '@ant-de...
antd design（4.x）中的Form
小怪兽
04-21 4801
1.初始化表单数据 initialValues：表单默认值，只有初始化以及重置时生效。 代码示例如下： <Form layout="horizontal" form={form} initialValues={{ RealName: userInfo.RealName, Sex: userInfo.Sex, Mobile: us...
React 表单源码阅读笔记
2401_85124858的博客
06-10 1059
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。
antd提交表单_antd4 form表单使用
weixin_42297705的博客
12-23 1018
antd4.x form使用实例：// AntdForm4.js class组件形式import React, { Component, useEffect } from "react";import { Form, Input, Button } from "antd";const FormItem = Form.Item;const nameRules = { required: true, ...
antd如何获取表单的值_React中引用antd的Form表单数据获取
weixin_39571403的博客
12-19 3618
const { getFieldDecorator } = this.props.form;this.getFieldsValue = this.props.form.getFieldsValue;//获得表单所有控件的值this.props.form.getFieldsValue(“name”)//获得指定控件的值this.props.form.validateFields((err, valu...
将antd中的Tree组件放在Form表单里面
weixin_44471622的博客
06-28 4932
问题： 前一段时间使用antd的Tree组件的时候遇到一个问题：将Tree组件放在Form表单的时候，想用initialValue给Tree的defaultExpandedKeys，defaultSelectedKeys和defaultCheckedKeys赋初始值，已找到解决方法。 解决思路： Tree 不是 form control，你不能直接把 Tree 丢给 getFieldDecorator，需要把 Tree 封装下再丢给 getFieldDecorator。 注意4.x版本的antd不支持
react超级简单的删除功能
FRC16669的博客
12-15 745
第一步：第二步：第三步：第四步：
react +antd form动态添加时,删除元素没有及时渲染问题解决
qq_38883889的博客
09-17 1009
react +antd form动态添加时,删除元素没有及时渲染问题解决
在react antd中动态生成多个 form表单组，包括一个动态添加/删除表单项的功能和一个提交表单的功能
weixin_38791717的博客
04-12 6561
方法，动态添加一个新的表单项。当用户提交表单时，将会调用。属性来指定占位文本。在每个表单项的最后，我们使用。组件来实现删除表单项的功能。在表单的最后，我们使用。方法，打印所有表单项的内容。在输入框中，我们使用。组件来实现提交表单的功能。方法循环渲染每个表单项，并使用。组件来动态生成多个表单项。属性指定表单项的名称，使用。在这个示例中，我们首先使用。组件包裹每个表单项。
关于清空ant.design 中表单内容的方法
Go_ahead_forever的博客
12-03 1378
关于清空ant.design 中表单内容的方法。其实就两个方法具体怎么清除一个一个试试就知道了。
Vue+antd实现动作列表（动态添加/删除表单）。
wwwbaidusss的博客
03-16 1497
在日常开发中会遇到大量的表单提交，如果都使用单个数据的添加会很麻烦，所以大多数会选择使用动态添加的做法。
antd4 Form.List删除会清空后面的数据
QiuXiang_的博客
07-31 925
【代码】antd4 Form.List删除会清空后面的数据。
集成电路芯片测试技术教学课件19CTA8280测试机.pdf
集成电路芯片测试技术教学课件19CTA8280测试机.pdf集成电路芯片测试技术教学课件19CTA8280测试机.pdf集成电路芯片测试技术教学课件19CTA8280测试机.pdf集成电路芯片测试技术教学课件19CTA8280测试机.pdf集成电路芯片测试技术教学课件19CTA8280测试机.pdf集成电路芯片测试技术教学课件19CTA8280测试机.pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值