使用antd组件完成注册页面
时间: 2023-08-10 20:06:00 浏览: 66
好的,这里是一个使用Ant Design组件库搭建的一个简单注册页面的代码示例:
```jsx
import { Form, Input, Button } from 'antd';
const RegistrationForm = () => {
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
return (
<Form
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default RegistrationForm;
```
上面这段代码中,我们使用了`Form`、`Input`和`Button`等Ant Design组件来构建一个简单的注册页面。在`Form`组件中,我们设置了`onFinish`和`onFinishFailed`属性来处理表单提交和校验失败的情况。在每个`Input`组件中,我们设置了校验规则,确保用户输入的内容符合要求。最后,我们使用`Button`组件来提交表单。