表单未使用 react handleSubmit 挂钩发布

Question

我正在尝试 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)} 但遇到了同样的问题。

有人能帮忙吗？

Answer 1

发生这种情况是因为您在提交函数中调用了 e.preventDefault();，这会阻止触发默认提交操作。因此您的表单正在通过验证，但从未提交。

要提交表单，请在 handleSubmit 方法的末尾添加 e.target.submit()。

Answer 2

通过其他人的帮助，我发现解决此问题的最佳方法是在 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>

表单未使用 react handleSubmit 挂钩发布

form is not posting using react handleSubmit hook

reactjs

forms

onsubmit