react18写一个登陆
时间: 2023-08-19 15:56:09 浏览: 45
当然可以!下面是一个简单的React 18登录页面示例:
```jsx
import React, { useState } from 'react';
const LoginPage = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleUsernameChange = (e) => {
setUsername(e.target.value);
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
// 在这里处理登录逻辑
console.log(`Username: ${username}, Password: ${password}`);
};
return (
<div>
<h1>Login</h1>
<form onSubmit={handleSubmit}>
<label>
Username:
<input type="text" value={username} onChange={handleUsernameChange} />
</label>
<br />
<label>
Password:
<input type="password" value={password} onChange={handlePasswordChange} />
</label>
<br />
<button type="submit">Login</button>
</form>
</div>
);
};
export default LoginPage;
```
这是一个简单的登录页面组件,其中包含一个包含用户名和密码输入框的表单。当用户输入用户名和密码并点击登录按钮时,`handleSubmit` 函数将被触发,你可以在这个函数中处理登录逻辑,比如发送请求到服务器进行验证。
请注意,这只是一个简单的示例,实际的登录过程可能涉及更复杂的逻辑和验证步骤。你可以根据你的需求对这个示例进行修改和扩展。