Javascript 提交表单时,如何防止收到服务器端响应后被刷新
我与reactjs和nodejs有问题,我想上传图像,同时将用户输入保存到数据库中。我能够完成所有这些,但问题是,如果我完全填写表单并点击提交按钮,数据将成功提交,但react页面正在刷新,我的用户Javascript 提交表单时,如何防止收到服务器端响应后被刷新,javascript,node.js,reactjs,express,Javascript,Node.js,Reactjs,Express,我与reactjs和nodejs有问题,我想上传图像,同时将用户输入保存到数据库中。我能够完成所有这些,但问题是,如果我完全填写表单并点击提交按钮,数据将成功提交,但react页面正在刷新,我的用户e.preventDefault()和e.stopPropagation()函数仍然是一样的,而且我包装了我的\uu handleSubmit()但是onClick={(e) =>{this.{uuuuuuu handleSubmit(e)}}所有这些都是一样的东西 反应代码 __handleSu
e.preventDefault()
和e.stopPropagation()
函数仍然是一样的,而且我包装了我的\uu handleSubmit()
但是onClick={(e) =>{this.{uuuuuuu handleSubmit(e)}}
所有这些都是一样的东西
反应代码
__handleSubmit = async (e) => {
e.preventDefault();
e.stopPropagation();
const formData = new FormData();
formData.append("collection_title", this.state.collection_title);
formData.append("collection_description",this.state.collection_description);
formData.append("quiz_category", this.state.quiz_category);
formData.append("visibility", this.state.visibility);
formData.append("selectedCover", this.state.selectedCover);
formData.append("User_ID", this.state.user_data.User_ID);
quiz.createQuizCollection(formData, CollectionResponse => {
if (CollectionResponse)
if (CollectionResponse && CollectionResponse[0].error) {
toast.error(`Message: ${CollectionResponse[0].message}`);
} else {
toast.success(`Message: ${CollectionResponse[0].message}`);
this.setState({ Collection_ID: CollectionResponse[0].Collection_ID });
this.props.history.push(`/create/${CollectionResponse[0].Collection_ID}`);
}
});
app.post("/api/create-collection", (req, res) => {
if (req.files === null) {
const col_res = {
message: "Collection cover image can not be empty, Please Upload Cover Image",
error: true,
collectionStatus: false,
nums_row: 0,
Collection_ID: ''
};
return res.status(200).json({ Response: col_res }, 500, 'Content-Type', 'application/json');
} else {
const selectedImage = req.files.selectedCover;
const collection_title_slug = dataValidation.convertToSlug(req.body.collection_title);
const collection_path = __dirname+"/../client/public/images/"+collection_title_slug;
if (!fs.existsSync(collection_path)){
fs.mkdirSync(collection_path);
}
selectedImage.mv(`${collection_path}/${selectedImage.name}`,err => {
if (err) {
const col_res = {
message: "Unable to upload image, Please Try Again",
error: true,
collectionStatus: false,
nums_row: 0,
Collection_ID: ""
};
return res.status(200).json( { Response: col_res }, 500, "Content-Type", "application/json" );
} else {
CollectionModel.CreateCollection(selectedImage.name, req.body, result => {
if (!result.error) {
return res.status(200).json({ Response: result }, 200, 'Content-Type', 'application/json');
} else {
return res.status(200).json({ Response: result }, 300, 'Content-Type', 'application/json');
}
});
}
});
}
});
})
节点代码
__handleSubmit = async (e) => {
e.preventDefault();
e.stopPropagation();
const formData = new FormData();
formData.append("collection_title", this.state.collection_title);
formData.append("collection_description",this.state.collection_description);
formData.append("quiz_category", this.state.quiz_category);
formData.append("visibility", this.state.visibility);
formData.append("selectedCover", this.state.selectedCover);
formData.append("User_ID", this.state.user_data.User_ID);
quiz.createQuizCollection(formData, CollectionResponse => {
if (CollectionResponse)
if (CollectionResponse && CollectionResponse[0].error) {
toast.error(`Message: ${CollectionResponse[0].message}`);
} else {
toast.success(`Message: ${CollectionResponse[0].message}`);
this.setState({ Collection_ID: CollectionResponse[0].Collection_ID });
this.props.history.push(`/create/${CollectionResponse[0].Collection_ID}`);
}
});
app.post("/api/create-collection", (req, res) => {
if (req.files === null) {
const col_res = {
message: "Collection cover image can not be empty, Please Upload Cover Image",
error: true,
collectionStatus: false,
nums_row: 0,
Collection_ID: ''
};
return res.status(200).json({ Response: col_res }, 500, 'Content-Type', 'application/json');
} else {
const selectedImage = req.files.selectedCover;
const collection_title_slug = dataValidation.convertToSlug(req.body.collection_title);
const collection_path = __dirname+"/../client/public/images/"+collection_title_slug;
if (!fs.existsSync(collection_path)){
fs.mkdirSync(collection_path);
}
selectedImage.mv(`${collection_path}/${selectedImage.name}`,err => {
if (err) {
const col_res = {
message: "Unable to upload image, Please Try Again",
error: true,
collectionStatus: false,
nums_row: 0,
Collection_ID: ""
};
return res.status(200).json( { Response: col_res }, 500, "Content-Type", "application/json" );
} else {
CollectionModel.CreateCollection(selectedImage.name, req.body, result => {
if (!result.error) {
return res.status(200).json({ Response: result }, 200, 'Content-Type', 'application/json');
} else {
return res.status(200).json({ Response: result }, 300, 'Content-Type', 'application/json');
}
});
}
});
}
});
提前感谢…这个.props.history.push就是原因
history.push
用于更改当前位置
这个.props.history.push就是原因
history.push
用于更改当前位置
setState
调用可能导致刷新。为什么需要将集合id存储在本地状态?我不这么认为,因为如果我注释掉回调响应,它仍会刷新setState
调用可能导致刷新。为什么需要将集合id存储在本地状态?我不这么认为,因为如果我如果我注释掉回调响应它仍然刷新我不确定它是否是推送原因如果我注释掉回调响应它仍然刷新我不确定它是否是推送原因如果我注释掉回调响应它仍然刷新