Есть форма с переходом на другую страницу после авторизации. Мне нужно, чтобы кнопка была неактивной пока количества символов не удовлетворяет условиям валидации.
Я попробовал прописывать onChange для инпута по отдельности. Каждый из них отдельно работает нормально. В комментариях код на дисейбл кнопки. Я не знаю, как совместить этот оба onChange
type User = {
name: string;
password: string;
};
function Login() {
const adminUser: User = {
name: "admin",
password: "admin123",
};
const [user, setUser] = useState({ name: "" });
const [error, setError] = useState("");
const Login = (inputValue: { name: string; password: string }) => {
console.log(inputValue);
if (
inputValue.name === adminUser.name &&
inputValue.password === adminUser.password
) {
setUser({
name: inputValue.name,
});
} else {
setError("Fill in the fields!");
}
};
return (
<div>
{user.name !== "" ? (
<Redirect to={"/Chat"} />
) : (
<LoginForm Login={Login} error={error} />
)}
</div>
)
.
import React, { FormEvent, useState } from "react";
// import React, { FormEvent, useState, useEffect } from "react";
interface ILoginForm {
Login: (inputValue: { name: string; password: string }) => void;
error: string;
}
const MoleculesLoginForm: React.FC<ILoginForm> = ({ Login, error }) => {
const [inputValue, setInputValue] = useState({ name: "", password: "" });
// const [namedError, setNamedError] = useState("");
// const [passwordError, setPasswordError] = useState("");
// const [formValid, setFormValid] = useState(false);
// useEffect(() => {
// if (namedError || passwordError) {
// setFormValid(false);
// } else {
// setFormValid(true);
// }
// }, [namedError, passwordError]);
// const nameHandler = (e) => {
// setInputValue(e.target.value);
// if (e.target.value.length < 3 || e.target.value.length > 20) {
// setNamedError("incorrect name");
// } else {
// setNamedError("");
// }
// };
// const passHandler = (e) => {
// setInputValue(e.target.value);
// if (e.target.value.length < 3 || e.target.value.length > 9) {
// setPasswordError("incorrect pass");
// } else {
// setPasswordError("");
// }
// };
const submitHandler = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
Login(inputValue);
};
return (
<div>
<form onSubmit={submitHandler}>
<div >
{error !== "" ? <div className="error">{error}</div> : ""}
<div>
<p>User name</p>
<input
type="text"
name="name"
id="name"
placeholder="Input user name"
// onChange={(e) => nameHandler(e)}
onChange={(e) =>
setInputValue({ ...inputValue, name: e.target.value })
}
value={inputValue.name}
/>
</div>
<div>
<p>Password</p>
<input
type="password"
name="password"
id="password"
placeholder="Input password"
// onChange={(e) => passHandler(e)}
onChange={(e) =>
setInputValue({ ...inputValue, password: e.target.value })
}
value={inputValue.password}
/>
</div>
<button
// disabled={!formValid}
type="submit"
>
Log In
</button>
</div>
</form>
</div>
);
};