React登录表单硬编码认证异常及表单重置问题排查

问题 #

我在React中为登录表单实现硬编码认证时遇到两个问题：

• 明明满足认证条件，却始终执行else分支
• 尝试在提交按钮的onClick事件中同时传入handleSubmit和authenticate函数时，用户名和密码的状态无法重置

原代码 #

import React, { useState } from "react";
import "./Login.css";

function Login() {
  const [name, setName] = useState("");
  const [uname, setUname] = useState("");
  const [pword, setPword] = useState("");

  const Employee = {
    id: 12345,
    password: "abcde",
  };

  function handleInput(e) {
    setName(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    setUname("");
    setPword("");
  }

  function authenticate() {
    if (uname === Employee.id && pword === Employee.password) {
      console.log("Success! Logged in.");
    } else {
      console.log("Invalid Employee ID and/or password");
    }
  }

  return (
    <div className="login-card">
      Hello {name}
      <div className="username" onChange={handleInput}>
        <input
          type="input"
          className="username-input"
          placeholder="Employee ID"
          onChange={(e) => setUname(e.target.value)}
          value={uname}
          autoComplete="off"
        />
      </div>
      <div className="password">
        <input
          className="password-input"
          type="password"
          placeholder="Password"
          onChange={(e) => setPword(e.target.value)}
          value={pword}
          autoComplete="off"
        />
      </div>
      <button
        className="submit-btn"
        type="submit"
        onClick={(handleSubmit, authenticate)}
      >
        Login
      </button>
    </div>
  );
}

export default Login;

问题原因及修复方案 #

1. 类型不匹配导致认证失败：Employee.id是数字类型12345，而输入框获取的uname是字符串类型，用===严格相等比较时会判定不匹配。可将比较改为==（松散相等，自动转换类型），或把Employee.id转为字符串，也可在获取输入时将uname转为数字。
2. onClick事件写法错误：(handleSubmit, authenticate)这种逗号运算符只会执行最后一个函数，handleSubmit根本没被调用，自然无法重置表单状态。正确做法是在handleSubmit内部调用authenticate，再将handleSubmit绑定到form的onSubmit事件上。
3. 缺少form标签：提交按钮type为submit却未包裹在form标签中，导致默认表单提交行为未被正确拦截。用form包裹输入框和按钮，绑定onSubmit事件更符合表单规范用法。

修复后的代码 #

import React, { useState } from "react";
import "./Login.css";

function Login() {
  const [name, setName] = useState("");
  const [uname, setUname] = useState("");
  const [pword, setPword] = useState("");

  const Employee = {
    id: 12345,
    password: "abcde",
  };

  function handleInput(e) {
    setName(e.target.value);
  }

  function authenticate() {
    if (uname == Employee.id && pword === Employee.password) {
      console.log("Success! Logged in.");
    } else {
      console.log("Invalid Employee ID and/or password");
    }
  }

  function handleSubmit(e) {
    authenticate();
    e.preventDefault();
    setUname("");
    setPword("");
  }

  return (
    <div className="login-card">
      Hello {name}
      <form onSubmit={handleSubmit}>
        <div className="username" onChange={handleInput}>
          <input
            type="input"
            className="username-input"
            placeholder="Employee ID"
            onChange={(e) => setUname(e.target.value)}
            value={uname}
            autoComplete="off"
          />
        </div>
        <div className="password">
          <input
            className="password-input"
            type="password"
            placeholder="Password"
            onChange={(e) => setPword(e.target.value)}
            value={pword}
            autoComplete="off"
          />
        </div>
        <button className="submit-btn" type="submit">
          Login
        </button>
      </form>
    </div>
  );
}

export default Login;

内容的提问来源于stack exchange，提问作者James McLellan