反应 js Formik <Form/> resetForm() 不起作用答案

【问题标题】：react js Formik <Form/> resetForm() is not working反应 js Formik <Form/> resetForm() 不起作用
【发布时间】：2021-12-30 16:44:17
【问题描述】：

我正在尝试在提交时重置我的 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 '../../services/CommentLocalStorage.js'
import * as Yup from 'yup';
 
function CommentForm(props){
   return (
        <Formik
        initialValues={{ autor: '', content: ''}}
        validationSchema={Yup.object({
            autor: Yup.string().required('Required'),
            content: Yup.string().required('Required')
        })}
        onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
                createComment(props.pageEnum, props.articleId, values.autor, values.content)
                setSubmitting(false);
            },400);
            resetForm();
        }}
        >
            <Form>
                <label htmlFor="autor">Nome</label>
                <Field name="autor" type="autor" placeholder="Nome"/>
                <ErrorMessage name="autor" />
                <br/>
                <label htmlFor="content">Comentário</label>
                <Field name="content" type="content" placeholder="Comentário" />
                <ErrorMessage name="content" />
                <br/>
                <button type="submit">Submit</button>
            </Form>
        </Formik>
   );
 };

 export default CommentForm;

似乎大多数人都会做这样的事情：

const formik = some configuration

然后他们像这样使用它

formik.resetForm()

相反，我使用的是 Formik 组件，其中包含所有内容（我是根据官方教程中提供的示例进行的）。如果可能的话，我想保持这种状态并仍然重置表单。

【问题讨论】：

标签： javascript reactjs formik yup

【解决方案1】：

将resetForm 作为参数传递给onSubmit 函数。这应该使您的函数可以访问 Formik 的 resetForm 方法，从而消除错误并成功重置表单。如果您想在 onSubmit 函数中使用 formik 库中的任何方法，请首先将参数传递给函数，以便您可以访问 formik 方法。让我知道这是否有帮助

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import {createComment} from '../../services/CommentLocalStorage.js'
import * as Yup from 'yup';
 
 
 
function CommentForm(props){
   return (
        <Formik
        initialValues={{ autor: '', content: ''}}
        validationSchema={Yup.object({
            autor: Yup.string().required('Required'),
            content: Yup.string().required('Required')
        })}
        onSubmit={(values, { setSubmitting, {resetForm }) => {  //<--- See here for code added
            setTimeout(() => {
                createComment(props.pageEnum, props.articleId, values.autor, values.content)
                setSubmitting(false);
            },400);
            resetForm();
        }}
        >
            <Form>
                <label htmlFor="autor">Nome</label>
                <Field name="autor" type="autor" placeholder="Nome"/>
                <ErrorMessage name="autor" />
                <br/>
                <label htmlFor="content">Comentário</label>
                <Field name="content" type="content" placeholder="Comentário" />
                <ErrorMessage name="content" />
                <br/>
                <button type="submit">Submit</button>
            </Form>
        </Formik>
   );
 };

 export default CommentForm;

【讨论】：