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

2024-07-04

这样我就有了我的表格。我只是希望提交成功后它是空的。

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

你可以这样做onSubmit打回来

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

      setSubmitting(false);
    }}

而这不是enableReinitializing而是使用enableReinitialize

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Formik 中提交后如何重置/清空表单 的相关文章

随机推荐