javascript - react js Formik resetForm() 不工作

Question

我正在尝试在提交时重置我的 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 组件，其中包含所有内容(我是根据官方教程中提供的示例完成的)。如果可能的话，我想保持这种状态并仍然重置表单。

Answer 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;