如何在formik中禁用提交时自动重置表单？
在formik中禁用提交时自动重置表单，可以通过设置enableReinitialize属性为false来实现。enableReinitialize属性用于控制当表单的initialValues属性发生变化时是否重新初始化表单。
当enableReinitialize属性设置为false时，表单在提交后不会自动重置为初始状态，而是保留用户输入的值。这样可以避免用户在提交后需要重新填写表单的情况。
以下是一个示例代码：
import { Formik, Form, Field } from 'formik';
const initialValues = {
// 初始表单字段值
// ...
};
const App = () => {
const handleSubmit = (values, { resetForm }) => {
// 处理表单提交逻辑
// ...
// 手动重置表单
resetForm();
};
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
enableReinitialize={false} // 禁用自动重置
>
<Form>
{/* 表单字段 */}
{/* ... */}
<button type="submit">提交</button>
</Form>
</Formik>
);
};
export default App;在上述示例中，enableReinitialize属性被设置为false，这样在提交表单后，resetForm函数将不会自动将表单重置为初始状态。你可以在handleSubmit函数中手动调用resetForm函数来重置表单。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
相关·内容
我有一个表单，我想禁用按钮：
当表单被提交时，当窗体无效时，没有更改值的，，
我有一个按钮看起来是这样的：
<Button disabled={!(formik.isValid && formik.dirty) || formik.isSubmitting}>
Submit
</Button>
在我的onSubmit处理程序中
onSubmit: (values, { setSubmitting, resetForm }) => {
onFormSubmit(values)
resetForm({ values })
浏览 2提问于2021-09-07得票数 0
有没有办法调用formik.resetForm()
从父组件？
我有表单，但我只想在提交成功时重置表单
或者每次关闭formik时
有没有办法做到这一点？
onClick: (values, { setSubmitting, resetForm }) => {
return onSubmit(
values,
setSubmitting
),
resetForm()
}
浏览 0提问于2021-05-21得票数 0
1回答
是否可以在没有提交按钮的情况下提交表单？例如，在组件卸载时提交表单，这样用户就不需要单击按钮来保存。想想这样的事情：
import React from "react";
import { Formik, Form, Field } from "formik";
const Example = () => {
useEffect(() => {
return () => {
//trigger Submit or send Request with Form Values from here
};
}, [
浏览 3提问于2020-08-10得票数 3
回答已采纳
当我提交时，我需要阻止Formik将我的字段标记为.touched。当我触摸一个字段时，应该设置.touched，但是单击Submit可以将.touched重置为{}。我在文档里读到
在提交表单之前，Formik会触及所有字段，以便所有可能隐藏的错误现在都是可见的。
我有自己的自定义isInvalid=定义和跟踪自己的submitClicked变量，所以我需要关闭或逆转这种行为。我希望填充errors，但我希望touched在单击Submit后为空(重置)。
我正在考虑在某个地方调用setTouched({})，但我需要一个事件来告诉我验证已经完成。我也不知道在哪里插入它；我不能从监视sub
浏览 0提问于2021-09-30得票数 1
我有一个react原生的Formik表单和一个Yup validationSchema。当用户提交表单时，我想创建一个警告与错误字段，如果有字段是无效的。 Dependencies:
"formik": "^1.4.1",
"react": "16.5.0",
"react-native": "0.57.1", 我曾尝试在Formik呈现中使用isValid，并创建了一个Alert with errors，但得到了一个空的errors对象。但是，如果我再次提交/或单击submit两次，error对
浏览 17提问于2019-01-11得票数 5
回答已采纳
因此，我使用formik作为更新/编辑表单，并将起始初始值作为当前文本。当我提交并调用resetForm时，新文本被替换为过去的文本。
<Formik
initialValues={{ text: existingPost.text }}
onSubmit={(values, actions) => {
exampleSubmitHanlder(values);
actions.resetForm();
}}>
我有类似的东西，也尝试过做actions.resetForm({text: '&#
浏览 2提问于2020-02-18得票数 2
我有一个简单的Formik表单，其中Submit方法只是输出到控制台。结构是
// Submit Form: Custom method referenced in Formik
const submitForm = async (formValues) => {
console.log(JSON.stringify(formValues));
};
<Formik
enableReinitialize
validationSchema={schema}
onSubmit={ (values) => {
submitForm
浏览 8提问于2021-08-24得票数 8
回答已采纳
我使用Formik创建表单：
const initialValues = {
groupName: '',
description: '',
testGroup: 0
};
return (
<Formik initialValues={initialValues} >
{(formik) => {
const { setValues }
浏览 7提问于2021-03-02得票数 0
回答已采纳
下面是我使用React的formik表单验证代码。默认情况下，在加载表单时，我希望禁用submit按钮：
import { useFormik } from "formik";
import * as Yup from "yup";
const formik = useFormik({
initialValues: {
firstName: "",
lastName: "",
email: ""
},
validationSchema: Yup.obje
浏览 6提问于2019-12-22得票数 51
回答已采纳
1回答
当我打开屏幕时，在第一次提交表单之前，我不会看到任何验证错误。一旦正确输入电子邮件地址并按下按钮提交表单，表单逻辑就可以正常工作。会显示一个警报&该字段被重置(有意)
然而，一旦我关闭警报，Formik仍然显示一个错误，我必须输入一个电子邮件地址(必需字段)。是否也可以重设错误？就像我第一次打开屏幕的时候一样？我希望只有在提交表单时才会出现此错误，而不需要键入任何内容。
我的代码片段：
在此重置值：
const initialValues: FormValues = {
email: '',
};
const handleSubmitForm
浏览 1提问于2020-05-10得票数 3
我使用Formik作为我的react表单。表单提交后，我需要重置表单。我需要在save函数中重置表单。这是我的save函数。 const saveForm= (event) => {
const header = {
Auth_token: `${appUserConfig.accessTokenName}=${appUserConfig.accessToken}`,
User_name: appUserConfig.userName,
};
console.log(data);
httpPost(SAVE_INVOICE,d
浏览 46提问于2021-03-22得票数 0
回答已采纳
我正在使用Formik，并想知道如何在离开屏幕时清除错误和表单值。
例如，用户尝试提交没有值的表单，并显示错误：
当用户导航到不同的屏幕，然后返回时，这些错误仍然存在。有办法清除这些东西吗？例如，我可以访问useEffect钩子中的Formik方法吗？
到目前为止，这就是我的实现：
export const SignIn = ({route, navigation}) => {
const formValidationSchema = Yup.object().shape({
signInEmail: Yup.string()
.required(&#
浏览 14提问于2022-03-28得票数 1
我使用Formik和yup验证，遵循以下模式：
const handleSubmit = async (values, { setStatus }) => {
setStatus(''); // clean errors messages
try {
... do submit work ...
const res = await sendData( convertValues(values)); //
... more work
} catch (e) {
console.error(e);
setStatus(&
浏览 7提问于2020-11-25得票数 7
我有一个带有Formik表单的有状态函数组件，它根据isSubmitting的值呈现不同的内容。
const MyPage: FunctionComponent<Props> = ({propOne, propTwo}) => {
<Formik ...>
...
{isSubmitting ? (
<div>show this on submitting</div>
) : (
<div>show this when not</div>
)}
</For
浏览 2提问于2020-04-28得票数 6
3回答
特定字段格式的句柄重置
、、、
我刚开始使用Formik，我喜欢它使制作表单和在react中处理表单变得多么简单。我已经使用formik创建了多个自定义字段，我在这里将创建的react select字段作为示例。
import { ErrorMessage, Field } from "formik";
import React from "react";
import Select from 'react-select'
const SelectInput = (props) => {
const { label, name, id,options, requi
浏览 21提问于2022-03-17得票数 5
1回答
我正在尝试将Formik与Mui集成，以便有一个按钮组件，如下所示：
import React from "react";
import { Button } from "@mui/material";
import { useFormikContext } from "formik";
const ButtonWrapper = ({ children, ...otherProps }) => {
const { submitForm } = useFormikContext();
const handleSubmi
浏览 2提问于2022-04-19得票数 0
我有一个多页的Formik表单，我想在应用程序中使用柏树进行测试。我想验证当用户在最终页面上提交表单时，所有字段都被正确填充。
我试图挂载包含formik表单cy.mount()的组件，它给出了一个错误“意外字符'�'”。另外，我尝试将id分配给formik表单，然后使用cy.get中的id (“#id”)访问它。
使用的命令： cy.mount()；
cy.get("#id")
浏览 0提问于2019-07-09得票数 1
我有一个由formik控制的表单，当我填写所有字段并按下submit按钮时，函数onSubmit将被调用，并且我的表单将重置此值。 有时我的数据是不正确的(就像一封重复的电子邮件)，我需要保存这些数据。 我怎么能做到这一点？ 这是我的代码： const schema = Yup.object().shape({
login: Yup.string()
.email('Email não possui formato válido')
.required('Informe o email!'
浏览 22提问于2020-03-16得票数 1
我正在尝试使用Formik和Yup验证一个材料ui表单，但我得到了一个错误。 这是我从另一个文件导入的模式。 export const schema = Yup.object({
email: Yup.string()
.email('Invalid Email')
.required('This Field is Required'),
}); 这就是我使用验证的地方。如果我编写validation = schema，它不会给出错误，但也没有验证。如果我把它改成{schema}，应用程序就会崩溃。 export default funct
浏览 29提问于2020-04-07得票数 1
回答已采纳
我有一个Formik表单，如下所示，它在最初的实现中工作正常。我必须添加的一个额外功能是，当提交按钮被单击时，我必须禁用它，以防止双击。我遵循了在按钮上定义ref={submitBtnRef}的example here。但是在onClick中插入此代码后，Formik不再提交，它只是停止。如果我删除这个新代码，一切都会正常工作。没有验证错误；我输出Formik的errors，它是空的。也没有控制台错误。 const submitForm = async (formValues) => {
const url = '/app/submitAgreement';
浏览 28提问于2021-08-10得票数 0
回答已采纳
我正在尝试在提交时重置我的formik表单中的输入。似乎我应该使用resetForm()来做这件事，但是我得到了错误： src\components\CommentSubmition\inCommentSubmition.js第19行:13：'resetForm‘未定义no-undef 下面是我的组件： import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import {createComment} from '../../
浏览 54提问于2021-11-20得票数 0
回答已采纳
1回答
我正在使用Formik表单在React本地应用程序中。我希望使用Formik组件之外的按钮提交我的表单。我知道useFormikContext钩子是如何工作的，但问题在于我的组件是类组件(而不是函数组件)。我如何提交我的表格？
浏览 6提问于2021-11-12得票数 2
回答已采纳
我正在努力使无形的，和一起工作。文档说我们应该在表单提交时调用recaptchaRef.current.execute()，但是如果我们同时使用Formik和yup，那么只有在所有字段都通过验证模式之后，它才会触发提交逻辑。
基本上，我们需要调用execute方法，更新recaptcha值，并使用相同的触发器事件提交表单。我的问题是:我必须使用两个事件(一个用于execute方法，并更新recaptcha +一个来提交表单)。
选中这个沙箱：
如您所见，表单只有在提交按钮中第二次单击时才提交.
浏览 8提问于2021-01-26得票数 3
回答已采纳
1回答
我有一个用React和Formik制作的应用程序。我正在尝试添加一个警告，提醒用户在导航离开之前保存更改。从react-router-dom 5开始，我们可以使用Prompt。因此，我的初始代码是： const PromptWhenDirty = () => {
const { dirty, touched } = useFormikContext();
console.log('touched:', touched);
return <Prompt when={dirty} message={'Leave without saving cha
浏览 13提问于2021-05-10得票数 1
回答已采纳
我正在尝试自动聚焦我的textField，我已经应用了' autoFocus‘，但是只有在我提交表单并添加了值之后，它才能工作，如果没有添加值(即我们第一次打开miui模式时)，就不能在textField中得到autoFocus。
因此，我试图通过编程方式使用useRef实现自动聚焦，但它似乎也不起作用。
const inputInitialFocus = useRef(null);
useEffect(() => {
const timeout = setTimeout(() => {
const inputFocus = inputIniti
浏览 2提问于2022-04-25得票数 0
1回答
如何在提交时禁用验证？
、、、
我有一个多步表单，并将每个步骤保存在一个<Formik />标记下。每个步骤的初始值和验证模式保存在对象中：
const initialValues = {
step1Values: { ...values1 },
step2Values: { ...values2 },
step3Values: { ...values3 },
}
const validationSchema = Yup.object().shape({
step1Schemas: { ...yupSchema1 },
step2Schemas: { ...yupSchema2 },
s
浏览 4提问于2021-02-16得票数 0
我正在构建一个使用React和Formik的页面。在我的表单页面上，我有三个Formik表单，它们使用开关语句有条件地呈现。我是这样做的，因为每个表单的数据都需要发送到他们自己的api端点，所以我要保持它们逻辑上的分离。当提交第一个表单时，它会循环到下一个表单。我遇到了一个问题，在访问第二个Formik表单中的值支柱时，它会显示来自第一个表单的值。尽管Formik存在于不同的返回语句中，但在默认情况下，当多个Formik存在时，Formik似乎没有处理数据分离。
我的开关语句是这样的：
switch(currentform) {
case 'form1':
浏览 4提问于2022-03-02得票数 0
我有一个Formik“表单”，它的目的是混合到多个更大的Formik表单中。它不打算单独提交，但是有许多字段用于计算两个感兴趣的值。
摘要：
FormikA有firstName，lastName字段。
FormikB有x、y、z字段，并计算a、b。
FormikB没有提交按钮。
FormikA嵌入FormikB。
FormikA有一个提交按钮。
如果单击submit，FormikA必须提交firstName、lastName、a、b。
FormikB也嵌入到FormikC，FormikE中，因此不应该对FormikA有
浏览 4提问于2022-07-20得票数 0
我有一个使用Formik表单(子组件)和Modal (父组件)的登录页面。
问题是-当我在没有提交的情况下输入Formik表单(子组件)并关闭Modal (父组件)并尝试再次打开它时，它仍然显示前面的值。
当我关闭模式时，我想将Formik值设置为初始值。如果我使用的是react状态，那会很容易，但我使用的是formik，这就是为什么我感到困惑。
Login表单(子组件)
import React, { useState } from 'react'
import TextField from '@mui/material/TextField';
imp
浏览 3提问于2022-07-31得票数 1
3回答
具有初值反应的清晰Formik场
、、、、
CodeSandbox:
问题：
单击“重置”按钮，清除值为“初始值”的字段。
尝试：
有太多的变体可以通过以下方式重置表单：
resetForm()setFieldValue(<your_field_name>, '')form.current.reset()
但是，当在formik字段中有初始值时，这个列表并没有帮助。
片段：
import React from 'react'
import {Formik, Form, Field} from 'formik'
const Search = () => (
浏览 6提问于2019-10-05得票数 7
回答已采纳
我正在使用Formik在我的react应用程序中创建表单。视图上的选项卡很少，它们都包含相同的表单(具有相同字段的表单)。我希望在用户切换选项卡时记住一些字段。我想到的是在字段Redux事件上将值保存到onChange中，但是根据Formik文档，不建议将Formik values保存到Redux state中。此外，在表单提交时，我希望清除/重置这些值。什么是最好的阿普普拉？
浏览 0提问于2019-07-08得票数 0
在用户单击cancel按钮后，我尝试重置表单。
我创建了一个示例应用程序来演示这个问题：
1)用户单击编辑按钮以打开要编辑的表单
2)用户在字段中输入内容
3)用户点击cancel按钮关闭表单
4)用户点击编辑按钮，再次打开表单
我期望formik能做什么：
表单将被重置
实际结果：
表单不会重置，它具有用户在步骤3中输入的值
我可以通过调用resetForm()方法来重置表单。
但是，我的印象是enableReinitialize会重置表单
enableReinitialize?: boolean
Default is false. Control whether Formik should
浏览 6提问于2019-11-09得票数 7
回答已采纳
1回答
我有一个表单，使用Formik作为我的表单，使用Yup进行验证。在每个Field下，我都有一个<ErrorMessage />组件来显示该表单域的相关消息。这可以很好地工作，但是，因为有很多字段，所以当用户提交表单时，我希望在submit按钮旁边显示一条通用消息。如下所示：
<div className="alert alert-danger">
One or more fields has an error.
</div>
我尝试基于Formik中的errors对象有条件地呈现它：
{Object.keys(errors).length
浏览 10提问于2021-02-27得票数 0
1回答
我正在尝试在Formik表单上添加一个重置按钮。问题是，当我单击Reset按钮时，Formik会显示验证错误。只有在我再次单击reset按钮之后，表单才会真正重置。如果用户想要的只是重置表单，那么为什么要进行表单验证呢？这是我的表单组件：
const ContactForm = () => {
const submit = async (values, { setSubmitting, resetForm }) => {
... submit logic ...
}
return (
<Formik
initialV
浏览 0提问于2021-02-16得票数 0
目前，我有不同formik形式的父组件和子组件Dialog，其简要结构如下 <Formik initialValues={...} onSubmit={...}>
//some form fields here
<Button type="submit" />
<Button onClick={()=>{setDialogOpen(true)}}/>
<Dialog Open={dialogOpen}>
</Formik>
<Dialog>
<Formik initial
浏览 21提问于2020-08-13得票数 0
回答已采纳
1回答
我有以下表单代码，重置按钮仅清除添加到现有默认值的任何附加文本： const initialValues = {
firstName,
lastName,
email: customerEmail,
title: customerTitle,
dob,
}
return (
<Formik
initialValues={initialValues}
onSubmit={data => handleOnSubmit(data)}
>
{formik => (
浏览 15提问于2020-11-30得票数 2
回答已采纳
我正在使用Formik和React-Select，我想在聚焦于select时按enter键提交表单。 当我专注于任何其他输入并按下Enter时，它会提交表单，没有任何问题，但当我尝试用Select做同样的事情时，它不起作用。即使在formik的例子中，它也不能工作。有什么easy的方法可以做到这一点吗？我知道我可以监听Enter并提交表单，但可能有一些事件或道具应该只附加到Select https://codesandbox.io/s/73jj9zom96
浏览 12提问于2019-02-14得票数 0
1回答
尝试在表单提交上生成验证字段。(同时，onblur和onchange也必须是活动的)但是当我离开字段时是空的，然后提交表单。它不会产生任何错误。
这怎么可能？
我的第二个问题是:当我将值发布到rest时。它可能返回400个错误，我希望将这些错误用于我的验证字段。下面是我的api响应：
{ "msg"：“缺少必需字段”、“错误”：{“名称”："validation.required“、”国家“："validation.required”、“城市”："validation.required“}
必须让验证错误命名字段、城市和国家字段。
浏览 3提问于2020-10-01得票数 1
回答已采纳
我和formik有一个问题。基本上，我将有一个表，其中列出了所有存在错误的表单的Id。当用户单击表单的Id时，它将显示表单本身。要求是在呈现表单时也应该显示错误。有人知道怎么用Formik吗？此外，如果用户编辑字段，字段验证应该正常工作。
我把密码箱链接放在这里。。基本上，我希望当表单出现时，我应该看到错误，而不仅仅是当用户从字段移开或更改时。谢谢。
import { Formik, Field, Form } from "formik";
import { TextField } from "formik-material-ui";
class Post0
浏览 19提问于2019-10-08得票数 11
回答已采纳
我正在尝试集成我的提交函数，该函数将从表单获得的数据发送到我的django API。我已经使用formik完成了表单验证，并尝试调用函数来发布数据。
我的formik的onSubmit函数看起来是什么样子：
const Registration = () => (
<Formik
initialValues={{
username: "",
email: "",
password: "",
re_password: "",
}}
onSubmi
浏览 0提问于2020-08-09得票数 1
我的ReactJS应用程序- 中有以下结构。我试图通过使用引导模式窗口的一个按钮来提交Formik表单，但是我无法理解如何从树下的两个组件调用表单提交，并将函数组合在一起。
有人能好心地建议一下，这是否是可以实现的？
谢谢!
浏览 3提问于2020-07-13得票数 1
回答已采纳
我正在用Formik提交一份表格。我希望有稍微不同的验证逻辑，取决于它是由模糊/更改事件触发的，还是由预提交验证触发的。(长话短说，在预提交期间，我只想运行同步验证，- my后端将执行与提交表单时在模糊/更改上运行的异步验证相同的异步验证，因此我希望在预提交中跳过它。)我的验证函数如下所示：
validate={(value) => {
const error = validateSync(value);
if (!error && !form.isSubmitting) {
return validateAsync(value);
浏览 7提问于2021-11-19得票数 0
1回答
如下所示，表单组件使用了useFormik钩子。这个组件满足了我的所有需求，但是当测试开始发挥作用时，尤其是在提交表单时，我感到很困难。 Form.tsx import {
TextField,
Button,
Box,
Typography,
useTheme,
Snackbar
} from '@material-ui/core'
import { useState } from 'react'
import { useFormik } from 'formik'
import { object, string, S
浏览 32提问于2021-09-26得票数 1
回答已采纳
2回答
我的应用程序有组件的表单。更改表单值后，此组件调用提交。一切运行良好，但当更改路由时，它会更改表单值和<AutoSave/>调用提交。如何解决这个问题？一个可能的解决方案是在更改路由时再次挂载<AutoSave/>。
AutoSave:
import React, { useEffect, useCallback } from 'react'
import { useFormikContext } from 'formik'
import debounce from 'lodash.debounce'
cons
浏览 0提问于2019-12-11得票数 5
回答已采纳
默认是假的。控制如果initialValues更改，Formik是否应该重置窗体(使用深度相等)。
我正在传递一个在initialValues中设置的对象(通过道具)，对象定义是：
{
"shoppingList": {
"title": "",
"items": [ { "quantity": 0, description: "" } ]
}
}
我在Formik FieldArray组件中使用这个。我正在使用内联箭头函数更新按钮onClick处理程序中的数量，该
浏览 4提问于2019-03-06得票数 4
我使用Formik在React中编写了以下表单： import React, { FunctionComponent } from 'react';
import { NavLink } from 'react-router-dom';
import { object, string } from 'yup';
import { Formik, FormikActions, Field, FormikProps } from 'formik';
import SimpleInput from './Fields/Simp
浏览 28提问于2019-01-24得票数 12
回答已采纳
1回答
如何防止首次重新呈现Formik
、、、、
我开始使用创建by Jared Palmer的<AutoSave/>组件 const AutoSave = ({debounceMs}) => {
const formik = useFormikContext()
const debouncedSubmit = useCallback(
debounce(formik.submitForm, debounceMs),
[formik.submitForm, debounceMs]
)
useEffect(() => debouncedSubmit, [debouncedSubmit
浏览 12提问于2019-12-08得票数 1
回答已采纳
1回答
我有一个非常简单的表单设置，当用户按下重置表单按钮时，我需要传递新的初始值。我正在跟踪doc，但我最终创建了递归问题。
formReset()作为onReset的一个参数传递给formik。函数被调用了，但我不确定递归发生在哪里。
为您提供方便。更改表单值，然后尝试重置表单。
App.js
// Helper styles for demo
import "./helper.css";
import { MoreResources, DisplayFormikState } from "./helper";
import React from "rea
浏览 2提问于2020-08-13得票数 1
我试图通过使用位于<Form>或<Formik>标记之外的外部按钮来提交表单
如下面的屏幕截图所示，我的按钮在Bootstrap > Modal页脚部分，它们在表单标记之外。当用户单击Submit按钮时，我试图提交表单。
请查看类似的代码如下。我把它上传到了。
function App() {
return (
<div className="App">
<Formik
initialValues={{
date:
浏览 0提问于2019-03-10得票数 15
回答已采纳
我已经构建了一个AutoSave组件，当formik值在formik上下文中发生变化时，它将提交一个formik表单。
AutoSave.tsx
import { useEffect, FC, useCallback } from "react";
import { FormikValues, useFormikContext } from "formik";
import { omit, isEqual } from "lodash";
interface AutoSaveProps {
delay?: number;
onSubmi
浏览 10提问于2022-07-21得票数 0
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
腾讯云开发者
