英文:
Formik resets form before submit
问题
当单击提交按钮时，在提交之前表单会被重置。
我使用Formik创建了一个表单。我尝试在提交后使用Formik的resetForm来重置表单。但它在提交之前重置了表单并提交了一个空表单。以下是我的表单：
<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>Add Picture Here</p>
) : (
values.picture.name
)}
</div>
)}
</Dropzone>
<button type="submit">提交</button>
</form>
)}
</Formik>
我不确定是否应该分享handleFormSubmit函数，但这里是它的代码：
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);
});
};
英文:
When clicked on submit button, form gets reseted before submited.
I have a form created with Formik. I'm trying to reset the form after submit with resetForm from Formik. But it resets the form before submitting it and submits an empty form. Here's my form:
<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>Add Picture Herse</p>
) : (
values.picture.name
)}
</div>
)}
</Dropzone>
<button type="submit" onClick={resetForm}> gönder</button>
</form>
)}
</Formik>
I'm not sure if I should share the handleFormSubmit function but here it is:
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);
});
};
答案1
得分: 2
从你的代码中移除 onClick={resetForm}：
<button type="submit">gönder</button>
然后在你的 handleFormSubmit 中：
.then((res) => {
console.log(res.status);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
resetForm(); // 这部分
});
如果对你有帮助，请告诉我。
英文:
Remove onClick={resetForm} :
<button type="submit"> gönder</button>
Then in your handleFormSubmit:
...
.then((res) => {
console.log(res.status);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
resetForm(); //this
});
Let me know if it works for you
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论