react利用ant写一个学生注册页面
时间: 2023-08-02 15:25:36 浏览: 52
好的,下面是一个使用 Ant Design 的 React 学生注册页面的示例代码:
```jsx
import React, { useState } from "react";
import { Form, Input, Button } from "antd";
function StudentRegistration() {
const [form] = Form.useForm();
function handleSubmit(values) {
console.log(values);
// 在这里可以将表单数据提交到后端服务器
}
return (
<div>
<h2>学生注册</h2>
<Form form={form} onFinish={handleSubmit}>
<Form.Item
label="姓名"
name="name"
rules={[{ required: true, message: "请输入姓名" }]}
>
<Input />
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[{ required: true, message: "请输入邮箱" }]}
>
<Input type="email" />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: "请输入密码" }]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
注册
</Button>
</Form.Item>
</Form>
</div>
);
}
export default StudentRegistration;
```
这个组件使用了 Ant Design 的表单组件,其中包含三个输入框:姓名、邮箱和密码。当用户提交表单时,调用 `handleSubmit` 函数,将表单数据打印到控制台,并可以将数据提交到后端服务器。
注意,我们使用了 `Form.Item` 组件来包装每个表单项,并给每个表单项指定了一些验证规则,例如 `required` 表示该项为必填项。另外,我们还使用了 `form` 属性将 `form` 实例与表单组件进行绑定,这样可以方便获取表单数据。