ReactJS注册表单提交时password返回undefined，仅能获取email值求助

问题原因 #

你的密码输入框name属性设置为psw，但在提交事件中尝试通过e.target.password获取它，两者名称不匹配，导致找不到对应元素，返回undefined。

两种解决方案 #

• 方案一：修改密码输入框的name属性
  将密码输入框的name改为password，这样就能通过e.target.password.value正确获取值：

const Register = () => {
  const registerAction = (e) => {
     e.preventDefault();
     console.log(e.target.email.value);
     console.log(e.target.password.value);
  };

  return (
    <div>
      <form onSubmit={registerAction}>
        <div className={classes.container}>
          <hr />

          <label for="email">
            <b>Email</b>
          </label>
          <input type="text" placeholder="Enter Email" name="email" required />
          <label for="psw">
            <b>Password</b>
          </label>
          <input
            type="password"
            placeholder="Enter Password"
            name="password" // 此处修改name为password
            required
          />
          <button className={classes.registerbtn}>Register</button>
        </div>
      </form>
    </div>
  );
};

export default Register;

• 方案二：修改获取密码的代码
  保持密码输入框name="psw"不变，在提交事件中用e.target.psw.value获取值：

const registerAction = (e) => {
   e.preventDefault();
   console.log(e.target.email.value);
   console.log(e.target.psw.value); // 此处改为psw
};

补充说明 #

表单元素在e.target下是通过自身的name属性来索引的，必须保证获取时的名称与输入框的name完全一致，才能正确拿到对应的值。

内容的提问来源于stack exchange，提问作者Suraj Prajapati