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中提交后如何重置/清空表单

1 个答案: