在react js中提交之前，如何禁用按钮直到所有表单都有效并进行验证

Question

我正在处理一个项目，该项目需要在提交之前对登录表单进行验证，

并禁用该按钮，直到所有表单在react js(函数组件(中都有效？

我写了这个代码，我不知道如何使按钮禁用，直到每个字段都是有效的

此外，我还是react js 的初学者

有什么建议吗？

import React, { useState } from "react";
import { emailValidator, passwordValidator } from "./regexValidator";
import { useNavigate } from "react-router-dom";
export default function Login() {
const navigate = useNavigate();
const [isDisabled, setDisable] = useState(true);
const [input, setInput] = useState({ email: "", password: "" });
const [errorPassword, seterrorPassword] = useState("");
const [errorEmail, seterrorEmail] = useState("");
const handleChange = (e) => {
setInput({ ...input, [e.target.name]: e.target.value });
};
const formSubmitter = (e) => {
e.preventDefault();
onKey();
navigate("/");
};
const onKey = (e) => {
e.preventDefault();
setDisable(true);
if (!emailValidator(input.email)) {
seterrorEmail("Please enter valid email id");
} else {
seterrorEmail("");
}

if (!passwordValidator(input.password)) {
seterrorPassword("Please enter valid password");
} else {
seterrorPassword("");
setDisable(false);
}

};
return (
<form onSubmit={formSubmitter}>
<input
type="email"
name="email"
onChange={handleChange}
onKeyUp={onKey}
error={errorEmail}
/>
<input
name="password"
onChange={handleChange}
onKeyUp={onKey}
error={errorPassword}
/>
<button
type="button"
disabled={isDisabled}
/>
</form>
);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

Answer 1

试试这个

<button disabled={input.email && input.password}>Hello</button>

Answer 2

如果不提供电子邮件，则不会禁用该按钮。这意味着用户只能提供密码，并且按钮将处于活动状态。

要检查这两个字段，请包括如下所示的if语句

if (!emailValidator(input.email)) {
seterrorEmail("Please enter valid email id");
} else {
seterrorEmail("");
}
if (!passwordValidator(input.password)) {
seterrorPassword("Please enter valid password");
} else {
seterrorPassword("");
}
if (emailValidator(input.email) && passwordValidator(input.password)) {
setDisable(false)
}