我們使用ant組件庫(kù)的Form表單提交之后不刷新整個(gè)頁(yè)面，表單中的內(nèi)容有時(shí)候是不會(huì)刷新，如何解決這個(gè)問(wèn)題？

首先定義一個(gè)[form]通過(guò)?Form.useForm 對(duì)表單數(shù)據(jù)域進(jìn)行交互，

const [form] = Form.useForm();

接著使用form.resetFields()重置整個(gè)表單，因?yàn)槲覀冃枰谔峤怀晒笾刂萌绻麤]有提交成功的話是不需要刷新表單的，所以我們將這個(gè)方法寫進(jìn)onFinish屬性中；具體代碼如下：

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

接著我我們將提交的按鈕和表單控件設(shè)置一下。onFinishFailed是提交表單且數(shù)據(jù)驗(yàn)證失敗后的回調(diào)事件，onFinish是提交成功的，注意區(qū)分。

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

將按鈕的htmlType的屬性值設(shè)置為submit

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

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

總結(jié)

以上是生活随笔為你收集整理的React+ant中的Form表单的刷新的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。