Utiliser Formik pour réinitialiser un formulaire avant de le soumettre
P粉138711794
P粉138711794 2023-09-10 22:06:21
0
1
512

Après avoir cliqué sur le bouton Soumettre, le formulaire sera réinitialisé avant la soumission.

J'ai créé un formulaire en utilisant Formik. J'essaie d'utiliser resetForm de Formik pour réinitialiser le formulaire après la soumission. Mais il réinitialise le formulaire avant de le soumettre et soumet un formulaire vide. Voici mon formulaire :

<Formik
            onSubmit={handleFormSubmit}
            initialValues={{
                content: "",
                picture: "",
            }}
        >
            {({
                values,
                handleBlur,
                handleChange,
                handleSubmit,
                setFieldValue,
                resetForm,
            }) => (
                <form onSubmit={handleSubmit}>
                    <Field
                        as="textarea"
                        onBlur={handleBlur}
                        onChange={handleChange}
                        value={values.content}
                        name="content"
                    />

                    <Dropzone
                        acceptedFiles=".jpg, .jpeg, .png"
                        multiple={false}
                        onDrop={(acceptedFiles) =>
                            setFieldValue("picture", acceptedFiles[0])
                        }
                    >
                        {({ getRootProps, getInputProps }) => (
                            <div {...getRootProps()}>
                                <input {...getInputProps} />
                                {!values.picture ? (
                                    <p>在这里添加图片</p>
                                ) : (
                                    values.picture.name
                                )}
                            </div>
                        )}
                    </Dropzone>
                    <button type="submit" onClick={resetForm}>提交</button>
                </form>
            )}
        </Formik>

Je ne sais pas si je devrais partager la fonction handleFormSubmit, mais la voici :

const handleFormSubmit = async (values, onSubmitProps) => {
        const formData = new FormData();
        for (let value in values) {
            formData.append(value, values[value]);
        }
        formData.append("picturePath", values.picture.name);
        fetch(`http://localhost:5000/api/home-profile/${data[0]._id}`, {
            method: "PUT",
            body: formData,
            headers: {
                Authorization: "Bearer " + token,
            },
        })
            .then((res) => {
                console.log(res.status);
            })
            .catch((err) => {
                console.log(err);
            });
    };
P粉138711794
P粉138711794

répondre à tous(1)
P粉592085423

Remove onClick={resetForm} :

<button type="submit"> gönder</button>

Puis dans votre handleFormSubmit :

...

.then((res) => {
    console.log(res.status);
})
.catch((err) => {
    console.log(err);
})
.finally(() => {
    resetForm(); //this
});

Si cela fonctionne pour vous, faites-le-moi savoir.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal