react js Formik <Form/> resetForm() 不起作用

Question

我正在尝试在提交时重置formik表单中的输入。似乎我应该使用resetForm((来做这件事，但我得到了错误：

src\components\CommentSubmission\inCommentSubmission.js第19:13行：未定义"resetForm"，未定义

这是我的组件：

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;