React原生如何验证用户名和密码

import React, { useState } from 'react';

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    // 进行用户名和密码的验证逻辑
    if (username === 'admin' && password === 'password') {
      // 验证通过，执行登录操作
      console.log('登录成功');
    } else {
      // 验证失败，显示错误消息
      setErrorMessage('用户名或密码错误');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名:</label>
        <input type="text" value={username} onChange={handleUsernameChange} />
      </div>
      <div>
        <label>密码:</label>
        <input type="password" value={password} onChange={handlePasswordChange} />
      </div>
      <div>
        <button type="submit">登录</button>
      </div>
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

export default LoginForm;