好的，下面是一个
简单的示例代码：
首先安装所需依赖：
```bash
npm install
react antd axios --save
```
然后创建一个 `Login` 组件和一个 `Register` 组件，分别用于登录和注册的页面展示。其中，我们使用了 `Form` 和 `Input` 组件来
实现表单输入，以及 `Button` 组件来
实现按钮的功能。
```jsx
// Login.jsx
import
React, { useState } from '
react';
import { Form, Input, Button, message } from '
antd';
import axios from 'axios';
const Login = () => {
const [
loading, set
Loading] = useState(false);
const onFinish = async (values) => {
set
Loading(true);
try {
const response = await axios.post('/api/login', values);
message.success(response.data.message);
set
Loading(false);
} catch (error) {
message.error(error.response.data.message);
set
Loading(false);
}
};
return (
<Form name="login" onFinish={onFinish}>
<Form.Item
name="email"
rules={[{ required: true, message: 'Please input your email!' }]}
>
<Input placeholder="Email" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password placeholder="Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit"
loading={
loading}>
Login
</Button>
</Form.Item>
</Form>
);
};
export default Login;
```
```jsx
// Register.jsx
import
React, { useState } from '
react';
import { Form, Input, Button, message } from '
antd';
import axios from 'axios';
const Register = () => {
const [
loading, set
Loading] = useState(false);
const onFinish = async (values) => {
set
Loading(true);
try {
const response = await axios.post('/api/register', values);
message.success(response.data.message);
set
Loading(false);
} catch (error) {
message.error(error.response.data.message);
set
Loading(false);
}
};
return (
<Form name="register" onFinish={onFinish}>
<Form.Item
name="name"
rules={[{ required: true, message: 'Please input your name!' }]}
>
<Input placeholder="Name" />
</Form.Item>
<Form.Item
name="email"
rules={[{ required: true, message: 'Please input your email!' }]}
>
<Input placeholder="Email" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password placeholder="Password" />
</Form.Item>
<Form.Item
name="confirmPassword"
rules={[
{ required: true, message: 'Please confirm your password!' },
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('The two passwords do not match!'));
},
}),
]}
>
<Input.Password placeholder="Confirm Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit"
loading={
loading}>
Register
</Button>
</Form.Item>
</Form>
);
};
export default Register;
```
在这里我们使用了 `axios` 来发送登录和注册的
请求，需要注意的是，这里的
请求地址是 `/api/login` 和 `/api/register`，而不是实际的后端
接口地址，根据实际情况进行修改。
最后在需要展示登录和注册功能的页面中引入 `Login` 和 `Register` 组件即可。
```jsx
import
React from '
react';
import Login from './Login';
import Register from './Register';
const LoginPage = () => {
return (
<div>
<h1>Login</h1>
<Login />
<hr />
<h1>Register</h1>
<Register />
</div>
);
};
export default LoginPage;
```
以上就是一个
简单的使用 `
react` 和 `
antd`
实现登录和注册功能的示例代码，希望对你有帮助。
扫一扫
4757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
