在Reactjs中实现硬编码身份验证的问题

import React, { useState } from 'react';

function Authentication() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    // 硬编码身份验证逻辑
    if (username === 'admin' && password === 'admin123') {
      setIsAuthenticated(true);
    } else {
      setIsAuthenticated(false);
    }
  }

  return (
    <div>
      <h2>身份验证</h2>
      <form onSubmit={handleSubmit}>
        <label>
          用户名:
          <input type="text" value={username} onChange={(event) => setUsername(event.target.value)} />
        </label>
        <br />
        <label>
          密码:
          <input type="password" value={password} onChange={(event) => setPassword(event.target.value)} />
        </label>
        <br />
        <button type="submit">登录</button>
      </form>
      {isAuthenticated ? <p>身份验证成功！</p> : <p>身份验证失败，请检查用户名和密码。</p>}
    </div>
  );
}

export default Authentication;