react登录界面

以下是一个简单的React登录界面的示例代码：

import React, { useState } from "react";

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

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

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

  const handleLogin = (event) => {
    event.preventDefault();
    // 在这里可以提交登录数据到后端进行验证
    console.log(`Username: ${username}, Password: ${password}`);
  };

  return (
    <form onSubmit={handleLogin}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          value={username}
          onChange={handleUsernameChange}
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={handlePasswordChange}
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
};

export default Login;

在上面的代码中，我们首先使用useState hook来定义username和password的状态。然后，我们分别使用一个input元素来获取用户名和密码，并使用onChange事件处理函数来更新相应的状态。最后，我们使用一个button元素来触发登录操作，并在handleLogin函数中提交登录数据到后端进行验证。