当用户通过表单登录时，我正在尝试在Reaction中设置硬编码身份验证。使用我现在拥有的代码，它总是返回“Else”语句，即使它满足“if”的要求。
我试图在提交按钮的onClick中传入handleSubmit函数和身份验证函数。我遇到的另一个问题是，当我传入这两个函数时，它不会重置表单上用户名和密码字段的状态。

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;

编辑：所有三个答案的组合都奏效了。我必须将div Package 在一个表单中，调用handleSubmit内部的身份验证函数，并在检查Employee.id时使用“==”代替“=”：

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" onClick={handleSubmit}>
          Login
        </button>
      </form>
    </div>
  );
}

export default Login;