mercredi 10 juin 2020

reactjs checkbox boolean value

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