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 }

LongShot

LongShot 是一款 AI 写作助手，可帮助您生成针对搜索引擎优化的内容博客。

77

查看详情

// ... (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;