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); }); };
Remove onClick={resetForm} :
Puis dans votre handleFormSubmit :
...
Si cela fonctionne pour vous, faites-le-moi savoir.