React前端登录表单认证实现教程：解决状态重置与类型比较陷阱

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 authenticateAndReset(e) { // 将所有逻辑封装在一个函数中
    // 尽管这里是button的onClick，但如果button type="submit"在form内，
    // 依然需要e.preventDefault()来阻止form的默认提交行为
    // 如果没有form，则不需要e.preventDefault()
    // 为了兼容性，最好还是加上
    if (e && e.preventDefault) {
      e.preventDefault(); 
    }

    if (uname === Employee.id && pword === Employee.password) {
      console.log("Success! Logged in.");
    } else {
      console.log("Invalid Employee ID and/or password");
    }
    setUname(""); // 重置用户名
    setPword(""); // 重置密码
  }

  return (
    <div className="login-card">
      Hello {name}
      <div> {/* 这里不再使用 <form> */}
        <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="button" onClick={authenticateAndReset}> {/* type="button" 防止在没有form时被当作submit */}
          Login
        </button>
      </div>
    </div>
  );
}

export default Login;

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

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

  // 认证信息，Employee ID 定义为字符串类型，与输入框的值类型一致
  const Employee = {
    id: "12345", 
    password: "abcde",
  };

  // 处理欢迎语输入框的函数
  function handleNameInput(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) {
    e.preventDefault(); // 阻止表单默认提交行为（页面刷新）
    authenticate();     // 执行认证逻辑
    setUname("");       // 清空用户名输入框
    setPword("");       // 清空密码输入框
  }

  return (
    <div className="login-card">
      Hello {name}
      {/* 使用 <form> 标签包裹表单元素，并绑定 onSubmit 事件 */}
      <form onSubmit={handleSubmit}>
        <div className="username">
          {/* 这里为了演示方便，将name的输入框和uname分开，实际可根据需求合并 */}
          <input
            type="text" // 明确类型为text
            className="name-input"
            placeholder="Your Name"
            onChange={handleNameInput}
            value={name}
            autoComplete="off"
          />
          <input
            type="text" // 明确类型为text
            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;