reactjs复选框布尔值

Question

我是 reactjs 钩子的新手，我在将复选框值（布尔值）发送到状态时遇到了困难。我有一个存储电子邮件（空字符串）、密码（空字符串）和登录时间（布尔值“真”）的状态。我可以存储电子邮件和密码，但无法将复选框值存储到状态中。如果我取消选中该复选框，则状态将仅返回布尔值 false 没有参数电子邮件和密码。

谢谢，抱歉英语不是我的母语。

检查： https://imgur.com/6VjzJxD

取消选中： https://imgur.com/9nbMzgn

代码如下：

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={{ textDecoration: "none", fontSize: "14px" }}
                      >
                        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;

Answer 1

在复选框的 onChange 函数中，您不会将状态值与其他字段合并。应该更新如下

onChange={() => setValues(prev=> ({...prev, loginTime: !prev.loginTime}))}