react登录注册功能
时间: 2023-09-08 21:08:20 浏览: 31
React 可以通过编写组件实现登录注册功能。以下是一个简单的示例代码:
```jsx
import React, { useState } from "react";
const LoginForm = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const handleUsernameChange = (event) => {
setUsername(event.target.value);
};
const handlePasswordChange = (event) => {
setPassword(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
console.log("Username: ", username);
console.log("Password: ", password);
// Add logic to submit form data to server and handle response
};
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input type="text" value={username} onChange={handleUsernameChange} />
</label>
<label>
Password:
<input type="password" value={password} onChange={handlePasswordChange} />
</label>
<button type="submit">Submit</button>
</form>
);
};
const RegisterForm = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const handleUsernameChange = (event) => {
setUsername(event.target.value);
};
const handlePasswordChange = (event) => {
setPassword(event.target.value);
};
const handleConfirmPasswordChange = (event) => {
setConfirmPassword(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
console.log("Username: ", username);
console.log("Password: ", password);
console.log("Confirm Password: ", confirmPassword);
// Add logic to submit form data to server and handle response
};
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input type="text" value={username} onChange={handleUsernameChange} />
</label>
<label>
Password:
<input type="password" value={password} onChange={handlePasswordChange} />
</label>
<label>
Confirm Password:
<input type="password" value={confirmPassword} onChange={handleConfirmPasswordChange} />
</label>
<button type="submit">Submit</button>
</form>
);
};
const LoginPage = () => {
return (
<>
<h1>Login</h1>
<LoginForm />
</>
);
};
const RegisterPage = () => {
return (
<>
<h1>Register</h1>
<RegisterForm />
</>
);
};
// Add routing to switch between login and register pages
export default function App() {
return (
<div className="App">
<LoginPage />
<RegisterPage />
</div>
);
}
```
这个示例代码包含了一个登录表单和一个注册表单,每个表单都有输入框和提交按钮。在表单提交时,可以将数据发送到服务器进行验证和处理。如果数据有效,则可以将用户重定向到主页面,否则可以显示错误消息。上面的代码演示了如何使用 React 的状态来管理表单数据,并使用事件处理程序来更新状态和处理表单提交。