使用react 写一段登陆的通用模版

import React, { useState } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('username:', username);
    console.log('password:', password);
    // 在这里发送请求到后台验证用户名和密码
  };

  return (
    <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>
  );
};

export default Login;

这是一个简单的登录组件, 使用了 React 的 useState hook 来管理输入框中的用户名和密码. 在表单提交时, 使用 preventDefault 阻止默认的表单提交行为, 并在 handleSubmit 函数中发送请求到后台验证用户名和密码。