reactjs - 在卸载时提交 Formik 表单
问题描述
是否可以在没有提交按钮的情况下提交 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;
解决方案
您可以创建一个自动提交的功能组件。通过让它在组件内呈现,您可以引用表单的上下文。您可以使用:
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>
你可以在这里阅读所有相关信息
推荐阅读
- powershell - 无法使用 Invoke-Command 将参数哈希表传递给另一个脚本
- c# - 如何有效地用另一个列表更新一个列表 C#
- javascript - React 组件从函数更改为类 - 状态和状态挂钩
- kubernetes - Kubernetes 问题中的 Artemis 复制
- php - 获取请求后的服务器端重定向
- dns - 将域连接到另一个网站上的页面
- javascript - postman javascript验证键值对
- android - 尝试将 .AAB 上传到 Google Play 控制台时出错 (res/values-fb)
- c++ - C++ 指针比较
- javascript - 在 .then 中使用 .map 时,标记组件不呈现标记