Im new in reactjs hooks, I am having difficulties on sending the checkbox value (boolean) to the state. I have a state that store email (empty string) , password(empty string) and loginTime (boolean 'true'). I am able to store email and password but I am unable to store the checkbox value into the state. If I unchecked the checkbox, the state will return only boolean false without parameter email and password.
Thank you, and sorry english is not my first language.
checks: https://imgur.com/6VjzJxD
uncheck: https://imgur.com/9nbMzgn
code as per below:
const Login = (props) => {
const [values, setValues] = useState({
email: "",
password: "",
loginTime: true
});
const onChange = (event) => {
setValues({ ...values, [event.target.name]: event.target.value });
};
const onSubmit = (e) => {
e.preventDefault();
console.log(values)
};
return (
<>
<section className="main">
<div className="content-w3ls right">
<div className="container">
<div className="header-sign">
<p>Sign in</p>
</div>
<div>
<form onSubmit={onSubmit} method="post">
<div className="txtLabel">
<label>Email address</label>
</div>
<div className="field-group">
{/* <label>Email address</label> */}
<span className="fa fa-user" aria-hidden="true"></span>
<div className="wthree-field">
<input
name="email"
id="email"
type="email"
// placeholder="Email"
required
value={values.email}
onChange={onChange}
></input>
</div>
</div>
<div className="txtLabel">
<label>Password</label>
</div>
<div className="field-group">
<span className="fa fa-lock" aria-hidden="true"></span>
<div className="wthree-field">
<input
name="password"
id="myInput"
type="Password"
value={values.username}
required
onChange={onChange}
></input>
</div>
</div>
<div className="checklayout">
<div>
<input type="checkbox" id="check" values={values.loginTime} checked={values.loginTime} onChange={() => setValues(!values.loginTime)}></input>
<span className="span-me">Remember Me</span>
</div>
<div>
<div>
<a
href="#"
className="text-right"
style=
>
Forgot your password?
</a>
</div>
</div>
</div>
<div className="wthree-field">
<button type="submit" className="btn">
{loading ? "Loading..." : "Sign In"}
</button>
</div>
}
export default Login;
Aucun commentaire:
Enregistrer un commentaire