表单未使用 react handleSubmit 挂钩发布
form is not posting using react handleSubmit hook
我正在尝试 post 将此表格发送到我的 mongoDB。当我只使用 onSubmit={true}
时,形式 posts 就像我想要的那样。但是,当我使用下面的代码并且 return 为真时,表单不会 post 并且我不知道为什么。
const handleSubmit = (e) => {
e.preventDefault();
let password = e.target.password.value;
let confirmPassword = e.target.confirmPassword.value;
let email = e.target.email.value;
let emailRegex = /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// set up email regex. and regex for valid names.
if (!emailRegex.test(email)) {
setError(true)
setErrorMessage("invalid email address.");
return false;
}
if (password !== confirmPassword) {
setError(true)
setErrorMessage("passwords do not match.");
return false;
}
setError(false)
console.log("reached end")
return true;
}
这是 handleSubmit 函数。当我拿走 e.preventDefault()
表格 posts 但没有任何我想先做的验证时。
此外,我在函数末尾有一个 console.log("reached")
,它始终显示并且 return 为真;紧随其后。因此,函数应该 return 为真,形式应该 post.
<Form id="registerForm" onSubmit={handleSubmit} method="POST" action="http://localhost:4000/api/auth/register">
//inputs
</Form>
同样,当我用布尔变量 true 替换 handleSubmit 时,一切都按计划进行。我也试过 onSubmit={(e) => handleSubmit(e)}
但遇到了同样的问题。
有人能帮忙吗?
发生这种情况是因为您在提交函数中调用了 e.preventDefault();
,这会阻止触发默认提交操作。因此您的表单正在通过验证,但从未提交。
要提交表单,请在 handleSubmit
方法的末尾添加 e.target.submit()
。
通过其他人的帮助,我发现解决此问题的最佳方法是在 handleSubmit 函数内部使用 post,以通过使用 axios 来缓解所有混淆。
这种方式返回 true 或 false 是无关紧要的,因为它已经在调用 post 函数,如果它在函数中通过验证。
在我的 handleSubmit 函数结束时而不是返回 true。我做了以下操作,结果如我所愿。
else {
setError(false)
console.log("reached end")
const newUser = {
username: username,
email: email,
password: password,
}
axios.post('http://localhost:4000/api/auth/register', newUser)
.then(handleRedirect);
}
然后我的表单看起来像这样
<Form id="registerForm" onSubmit={handleSubmit}>
//Inputs
</Form>
我正在尝试 post 将此表格发送到我的 mongoDB。当我只使用 onSubmit={true}
时,形式 posts 就像我想要的那样。但是,当我使用下面的代码并且 return 为真时,表单不会 post 并且我不知道为什么。
const handleSubmit = (e) => {
e.preventDefault();
let password = e.target.password.value;
let confirmPassword = e.target.confirmPassword.value;
let email = e.target.email.value;
let emailRegex = /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// set up email regex. and regex for valid names.
if (!emailRegex.test(email)) {
setError(true)
setErrorMessage("invalid email address.");
return false;
}
if (password !== confirmPassword) {
setError(true)
setErrorMessage("passwords do not match.");
return false;
}
setError(false)
console.log("reached end")
return true;
}
这是 handleSubmit 函数。当我拿走 e.preventDefault()
表格 posts 但没有任何我想先做的验证时。
此外,我在函数末尾有一个 console.log("reached")
,它始终显示并且 return 为真;紧随其后。因此,函数应该 return 为真,形式应该 post.
<Form id="registerForm" onSubmit={handleSubmit} method="POST" action="http://localhost:4000/api/auth/register">
//inputs
</Form>
同样,当我用布尔变量 true 替换 handleSubmit 时,一切都按计划进行。我也试过 onSubmit={(e) => handleSubmit(e)}
但遇到了同样的问题。
有人能帮忙吗?
发生这种情况是因为您在提交函数中调用了 e.preventDefault();
,这会阻止触发默认提交操作。因此您的表单正在通过验证,但从未提交。
要提交表单,请在 handleSubmit
方法的末尾添加 e.target.submit()
。
通过其他人的帮助,我发现解决此问题的最佳方法是在 handleSubmit 函数内部使用 post,以通过使用 axios 来缓解所有混淆。
这种方式返回 true 或 false 是无关紧要的,因为它已经在调用 post 函数,如果它在函数中通过验证。
在我的 handleSubmit 函数结束时而不是返回 true。我做了以下操作,结果如我所愿。
else {
setError(false)
console.log("reached end")
const newUser = {
username: username,
email: email,
password: password,
}
axios.post('http://localhost:4000/api/auth/register', newUser)
.then(handleRedirect);
}
然后我的表单看起来像这样
<Form id="registerForm" onSubmit={handleSubmit}>
//Inputs
</Form>