用react技术写一个登录注册页面
时间: 2024-04-30 19:20:18 浏览: 20
好的,我可以给你提供一个简单的示例代码。
首先,我们需要安装React和React-dom:
```
npm install react react-dom
```
然后我们创建一个名为 `Login` 的组件,用于渲染登录表单:
```js
import React, { useState } from 'react';
function Login() {
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}, Password: ${password}`);
};
return (
<form onSubmit={handleSubmit}>
<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">Log in</button>
</form>
);
}
export default Login;
```
这个组件包括用户名和密码的输入框,以及一个提交按钮。当用户提交表单时,将会在控制台打印出用户名和密码。
接下来,我们创建一个名为 `Register` 的组件,用于渲染注册表单:
```js
import React, { useState } from 'react';
function Register() {
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();
if (password !== confirmPassword) {
alert('Passwords do not match');
} else {
console.log(`Username: ${username}, Password: ${password}`);
}
};
return (
<form onSubmit={handleSubmit}>
<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>
<div>
<label htmlFor="confirm-password">Confirm Password:</label>
<input
type="password"
id="confirm-password"
value={confirmPassword}
onChange={handleConfirmPasswordChange}
/>
</div>
<button type="submit">Register</button>
</form>
);
}
export default Register;
```
这个组件包括用户名、密码和确认密码的输入框,以及一个提交按钮。当用户提交表单时,如果密码和确认密码不匹配,将会弹出一个警告框。否则,将会在控制台打印出用户名和密码。
最后,我们可以在 `App` 组件中使用这两个组件来渲染登录和注册页面:
```js
import React from 'react';
import Login from './Login';
import Register from './Register';
function App() {
return (
<div>
<h1>Login</h1>
<Login />
<h1>Register</h1>
<Register />
</div>
);
}
export default App;
```
这个组件将会渲染出一个登录页面和一个注册页面,并且当用户提交表单时,将会在控制台打印出用户名和密码。
希望这个示例能够帮助你开始编写登录和注册页面!