表单未使用 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>