react实现登录注册代码
时间: 2023-05-14 21:04:40 浏览: 79
以下是一个简单的 React 登录注册代码示例:
```jsx
import React, { useState } from 'react';
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleEmailChange = (event) => {
setEmail(event.target.value);
};
const handlePasswordChange = (event) => {
setPassword(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
console.log(`Email: ${email}, Password: ${password}`);
};
return (
<form onSubmit={handleSubmit}>
<label>
Email:
<input type="email" value={email} onChange={handleEmailChange} />
</label>
<label>
Password:
<input type="password" value={password} onChange={handlePasswordChange} />
</label>
<button type="submit">Login</button>
</form>
);
};
const Register = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const handleEmailChange = (event) => {
setEmail(event.target.value);
};
const handlePasswordChange = (event) => {
setPassword(event.target.value);
};
const handleConfirmPasswordChange = (event) => {
setConfirmPassword(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
console.log(`Email: ${email}, Password: ${password}, Confirm Password: ${confirmPassword}`);
};
return (
<form onSubmit={handleSubmit}>
<label>
Email:
<input type="email" value={email} onChange={handleEmailChange} />
</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">Register</button>
</form>
);
};
const App = () => {
return (
<div>
<h1>Login</h1>
<Login />
<h1>Register</h1>
<Register />
</div>
);
};
export default App;
```
这个示例包含两个组件:`Login` 和 `Register`。每个组件都有一个表单,用户可以输入他们的电子邮件和密码。`Login` 组件只有一个密码输入框,而 `Register` 组件有两个密码输入框,以确保用户输入的密码正确。当用户提交表单时,表单数据将被打印到控制台中。
请注意,这只是一个简单的示例,实际的登录注册代码需要更多的逻辑和验证。