表单提交后 formik 表单重置 react js

Question

我正在使用 Formik 作为我的 React 表单。表单提交后，我需要重置表单。我需要在保存函数中重置表单。这是我的保存功能。

  const saveForm= (event) => {
    const header = {
      Auth_token: `${appUserConfig.accessTokenName}=${appUserConfig.accessToken}`,
      User_name: appUserConfig.userName,
    };
    console.log(data);
    httpPost(SAVE_INVOICE,data, header)
      .then((response) => {
        if (response.status === 200) {
          toast.success('Successfully Saved', {position: toast.POSITION.TOP_RIGHT})
        }
       resetForm();
       // I need to call reset function here 
      })
      .catch((e) => {
        toast.error('Error', {position: toast.POSITION.TOP_RIGHT})
        console.log("e:", e);
      });
}

我关注了 Formik 文档。根据下面的文档，代码对我有用。

    <Formik
    initialValues={!location.state ? InvoiceInitalValues : location.state}
    validationSchema={POValidation}
    onSubmit={(form, actions, resetForm ) => {
      console.log(form);
      setTimeout(() => {
        saveInvoice(form);
        actions.setSubmitting(false);
        actions.resetForm();
      }, 1000);
    }}
  >

但是我需要在保存函数中重置表单。我如何在保存功能中重置我的表单。

Answer 1

有多种方法可以解决这个问题，一种是在 Formik 组件的 onSubmit 函数中调用 saveForm 并将处理重置事件的 saveForm 的参数传递给处理重置事件的参数。例子

 onSubmit:{(form, actions, resetForm ) => {
      saveForm(form, actions);
 }}

   const saveForm = (form, { resetForm }) => {
        //save form code
       resetForm();
    }

或者你可以像这样直接设置到onSubmit函数

onSubmit:saveForm

这会将 onSubmit 收到的所有参数直接传递给您的 saveForm 函数。

表单提交后 formik 表单重置 react js

formik form reset after form submit react js

javascript

reactjs

formik