反应 js Formik <Form/> 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;

反应 js Formik <Form/> resetForm() 不工作

react js Formik <Form/> resetForm() is not working

javascript

reactjs

yup

formik