在卸载时提交 Formik 表单

Question

是否可以在没有提交按钮的情况下提交 Formik 表单？例如，当组件卸载时提交表单，这样用户就不需要单击按钮来保存。想想这样的事情：

import React from "react";
import { Formik, Form, Field } from "formik";

const Example = () => {
  useEffect(() => {
    return () => {
      //trigger Submit or send Request with Form Values from here
    };
  }, []);

  return (
    <Formik
      initialValues={{
        firstName: "",
        lastName: "",
      }}
      onSubmit={(values, { setSubmitting }) => {
        //send Request
      }}
    >
      {() => (
        <Form>
          <Field name="firstName" />
          <Field name="lastName" />
        </Form>
      )}
    </Formik>
  );
};

export default Example;

Answer 1

您可以创建一个 auto-submits 的功能组件。通过让它在组件内部呈现，您可以引用表单的上下文。您可以使用：

import { useFormikContext } from 'formik';
 
 function AutoSubmitToken() {
   // Grab values and submitForm from context
   const { values, submitForm } = useFormikContext();

   React.useEffect(() => {
     return submitForm;
   }, [submitForm]);
   return null;
 };

您可以在组件下使用它

<Form>
   <Field name="token" type="tel" />
   <AutoSubmitToken />
</Form>

您可以阅读所有相关内容here

在卸载时提交 Formik 表单

Submitting a Formik Form on Unmount

reactjs

formik