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

【问题标题】：How to reset / empty form after submit in Formik在Formik中提交后如何重置/清空表单
【发布时间】：2019-05-17 06:30:26
【问题描述】：

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

我已经看到我应该使用 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>

【问题讨论】：

标签： reactjs forms formik

【解决方案1】：

你可以在onSubmit回调中这样做

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

      setSubmitting(false);
    }}

这不是enableReinitializing，而是使用enableReinitialize

【讨论】：

什么是handleSave？
handleSave 是组件内处理表单提交的道具或函数。这不是强制性的，您可以在回调本身中添加逻辑。我写了它作为参考。