我正在嘗試將此表單發布到我的 mongoDB。當我只使用 onSubmit={true} 時，表單就像我想要的那樣發布。但是，當我使用以下代碼并回傳 true 時，表單不會發布，我不知道為什么。
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() 表單發布但沒有任何我想先做的驗證時。
此外，我在函式末尾有一個 console.log("reached")，它總是顯示并回傳 true；緊隨其后。因此，函式應該回傳 true 并且表單應該發布。
<Form id="registerForm" onSubmit={handleSubmit} method="POST" action="http://localhost:4000/api/auth/register">
//inputs
</Form>
同樣，當我用布爾變數 true 替換 handleSubmit 時，一切都按計劃進行。我也試過 onSubmit={(e) => handleSubmit(e)} 但遇到同樣的問題。
任何人都可以幫忙嗎？
uj5u.com熱心網友回復：
發生這種情況是因為您正在呼叫e.preventDefault();提交函式，這會阻止觸發默認提交操作。所以您的表單正在通過驗證，但從未提交。
要提交表單，請e.target.submit()在handleSubmit方法的末尾添加。
uj5u.com熱心網友回復：
通過其他人的幫助，我發現最好的方法是在 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/353347.html