React+ant中的Form表单的刷新

我们使用ant组件库的Form表单提交之后不刷新整个页面，表单中的内容有时候是不会刷新，如何解决这个问题？

首先定义一个[form]通过 Form.useForm 对表单数据域进行交互，

const [form] = Form.useForm();

接着使用form.resetFields()重置整个表单，因为我们需要在提交成功后重置如果没有提交成功的话是不需要刷新表单的，所以我们将这个方法写进onFinish属性中；具体代码如下：

const onFinish = (values: any) => {form.resetFields();//刷新表单};

接着我我们将提交的按钮和表单控件设置一下。onFinishFailed是提交表单且数据验证失败后的回调事件，onFinish是提交成功的，注意区分。

 <Form layout="vertical"onFinish={onFinish}onFinishFailed={onFinishFailed}form = {form} hideRequiredMark>
<Button htmlType='submit' type="primary"> 确定 </Button>
</Form>

将按钮的htmlType的属性值设置为submit

如果需要刷新局部的值就需要用到另外一种方法

form.setFieldsValue({name: 'dee',age: 18,
});

React+ant中的Form表单的刷新相关推荐

Vue中使用form表单提交刷新问题
vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了 &l ...
HTML中的form表单有一个关键属性 enctype
HTML中的form表单有一个关键属性 enctype＝application/x-www-form-urlencoded 或multipart/form-data. 1.enctype=" ...
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...
button layui 点击事件_解决layui中的form表单与button的点击事件冲突问题
解决layui中的form表单与button的点击事件冲突问题 layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置, ...
在微信小程序中提交form表单
怎么在微信小程序中提交form表单发布时间:2021-04-07 16:26:31 来源:亿速云阅读:1229 作者:Leah 栏目:web开发活动:亿速云新用户活动,各类服务器大降价,满足绝大 ...
HTML中的form表单及其提交原理
HTML中的form表单 form属性表单内容数据类型表单控件 input表单控件 type属性其他属性 button表单控件 label表单控件表单组件 select option 表单提交 ...
antd中的form表单 initialValue导致数据不更新问题
初步理解 : initialValue就是所谓的defaultValue,只会在第一次赋值的时候改变,却又有一些不同,因为 initialValue又会因其他改动而改变. 然而当获取的数据重新上来要渲 ...
第83天：jQuery中操作form表单
操作form表单 1. 属性操作设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr("title", ...
oracle 中增加行,Oracle中实现FORM表单插入、锁定、更新行、删除行的包
此包写在oracle数据库中,供Form表单调用: CREATE OR REPLACE PACKAGE BODY cux_main_pkg AS /*========================= ...

React+ant中的Form表单的刷新

React+ant中的Form表单的刷新相关推荐

最新文章

热门文章