如何在 Formik 中提交后重置/清空表单

Question

所以我有我的表格。我只是希望它在提交成功后为空。

我发现我应该使用 enableReinitializing 并手动更改值，例如：this.values.content = "".

但我不明白我可以把这个选项放在哪里？

<Formik
    enableReinitializing //This is not working
    initialValues={{
        content: "",
    }}
    validationSchema={validAddMessageToProjectSchema(
        this.props.intl.locale
    )}
    validateOnBlur={true}
    onSubmit={ async ( values: AddMessageToProjectFormValue,
        { setSubmitting }: any
    ) => { await mutate({ variables: values });
        setSubmitting(false);
    }}
>
    {({ isSubmitting, values, errors, touched, setFieldValue }) => {
        return (
            <Form className="addMessageToProject-form">
                <div>
                    <FormattedMessage
                        id="addMessageToProject.descriptionField"
                        defaultMessage="Describe your post"
                    >
                        {msg => (
                            <Field
                                name="content"
                                placeholder={msg}
                                component={
                                    TextAreaField
                                }
                            />
                        )}
                    </FormattedMessage>
                </div>

                <Button
                    type="primary"
                    htmlType="submit"
                    className="addMessageToProject-form__submit form-submit"
                    disabled={isSubmitting}
                >
                    <FormattedMessage
                        id="addMessageToProject.button"
                        defaultMessage="Send Message"
                    />
                </Button>
            </Form>
        );
    }}
</Formik>

Answer 1

您可以在 onSubmit 回调中这样做

onSubmit={(values, {setSubmitting, resetForm}) => {
      handleSave(params, () => {
        resetForm(initialValues)
      })

      setSubmitting(false);
    }}

这不是 enableReinitializing 而是使用 enableReinitialize

如何在 Formik 中提交后重置/清空表单

How to reset / empty form after submit in Formik

forms

reactjs

formik