如何使react登录按钮呈现登录组件

import React, { useState } from 'react';

const Login = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // 执行登录逻辑，发送登录请求到服务器
    // 根据服务器的响应来更新登录状态
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    // 执行登出逻辑，发送登出请求到服务器
    // 根据服务器的响应来更新登录状态
    setIsLoggedIn(false);
  };

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

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

  if (isLoggedIn) {
    return (
      <div>
        <p>已登录</p>
        <button onClick={handleLogout}>登出</button>
      </div>
    );
  } else {
    return (
      <div>
        <input type="text" value={username} onChange={handleUsernameChange} placeholder="用户名" />
        <input type="password" value={password} onChange={handlePasswordChange} placeholder="密码" />
        <button onClick={handleLogin}>登录</button>
      </div>
    );
  }
};

export default Login;