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",
  };

  // ... 其他函数和JSX
}

// ... (useState 和 Employee 定义)

  function authenticate() {
    // 严格相等 (===) 检查值和类型
    if (uname === Employee.id && pword === Employee.password) {
      console.log("Success! Logged in.");
      // 实际应用中会进行路由跳转、存储用户token等
    } else {
      console.log("Invalid Employee ID and/or password");
      // 实际应用中会显示错误消息给用户
    }
  }

// ... (handleSubmit 和 JSX)

// ... (useState, Employee, authenticate 定义)

  function handleSubmit(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    authenticate();     // 执行认证逻辑
    setUname("");       // 清空用户名
    setPword("");       // 清空密码
  }

// ... (JSX)

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) {
    e.preventDefault(); // 阻止表单默认刷新行为
    authenticate();     // 执行认证逻辑
    setUname("");       // 清空用户名输入框
    setPword("");       // 清空密码输入框
  }

  return (
    <div className="login-card">
      Hello {name} {/* 显示实时输入的名称 */}
      <form onSubmit={handleSubmit}> {/* 将提交事件绑定到表单 */}
        <div className="username" onChange={handleInput}> {/* 此处的 onChange 仅用于更新 name 状态 */}
          <input
            type="input"
            className="username-input"
            placeholder="Employee ID"
            onChange={(e) => setUname(e.target.value)} // 更新 uname 状态
            value={uname}
            autoComplete="off"
          />
        </div>
        <div className="password">
          <input
            className="password-input"
            type="password"
            placeholder="Password"
            onChange={(e) => setPword(e.target.value)} // 更新 pword 状态
            value={pword}
            autoComplete="off"
          />
        </div>
        <button className="submit-btn" type="submit"> {/* type="submit" 触发 form 的 onSubmit */}
          Login
        </button>
      </form>
    </div>
  );
}

export default Login;