我們使用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表单的刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。