Rumah > Soal Jawab > teks badan
Selepas mengklik butang hantar, borang akan ditetapkan semula sebelum dihantar.
Saya mencipta borang menggunakan Formik. Saya cuba menggunakan resetForm Formik untuk menetapkan semula borang selepas penyerahan. Tetapi ia menetapkan semula borang sebelum menyerahkan dan menyerahkan borang kosong. Ini borang saya:
<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>
Saya tidak pasti sama ada saya perlu berkongsi fungsi handleFormSubmit, tetapi inilah:
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粉5920854232023-09-11 20:08:42
Alih keluar onClick={resetForm}:
<button type="submit"> gönder</button>
Kemudian dalam pemegang andaFormSubmit:
...
.then((res) => { console.log(res.status); }) .catch((err) => { console.log(err); }) .finally(() => { resetForm(); //this });
Jika ini sesuai untuk anda, sila beritahu saya.