Ant Design 表单基础用法综合示例

Ant Design 的表单组件设计得非常出色,极大地简化了表单开发的复杂度,让开发者能够快速构建出功能丰富、交互友好的表单界面。

接下来总结一下 Ant Design 中表单的基本用法。

1. Form 组件

   • 用于定义整个表单,可以设置表单的布局方式、提交行为等。
   • 通常会将表单字段组件嵌套在 Form 内部使用。

2. 表单字段组件

   • 包括 Input、Select、Checkbox、Radio 等常见的表单控件组件。
   • 这些组件可以通过设置 name 属性与表单数据进行绑定。

3. 表单布局

   • Ant Design 提供了两种常见的表单布局方式: 水平布局和垂直布局。
   • 可以通过 Form 组件的 layout 属性进行设置, 默认为水平布局。

4. 表单校验

   • Ant Design 内置了强大的表单校验功能,开发者可以使用 rules 属性定义校验规则。
   • 当表单提交时,表单会自动进行校验,并在发现错误时进行提示。

5. 表单提交

   • 通过 onFinish 属性可以监听表单提交事件,在此回调函数中处理表单数据的提交逻辑。
   • 表单组件会自动管理表单的提交状态,开发者只需关注业务逻辑即可。

6. 表单重置

   • 表单组件提供了 resetFields 方法用于重置表单数据。
   • 通常可以在表单的 “重置” 按钮的 onClick 事件中调用该方法。

示例：Ant Design 表单的基本用法,包括字段定义、布局、校验和提交、重置、回显示数据常用功能。

import React from 'react';
import { Form, Input, Select, Checkbox, Button,Space} from 'antd';const { Option } = Select;const MyForm = () => {const [form] = Form.useForm();const onFinish = (values) => {console.log('Received values of form:', values);};const onReset = () => {form.resetFields();};const onFill = () => {form.setFieldsValue({ username: '三丰',password:"123", gender: 'male' });};return (<Form name="myForm" form={form}  onFinish={onFinish} layout="vertical" style={{margin:"15px"}}><Form.Itemlabel="Username"name="username"rules={[{ required: true, message: 'Please input your username!' }]}><Input /></Form.Item><Form.Itemlabel="Password"name="password"rules={[{ required: true, message: 'Please input your password!' }]}><Input.Password /></Form.Item><Form.Itemlabel="Gender"name="gender"rules={[{ required: true, message: 'Please select your gender!' }]}><Select><Option value="male">Male</Option><Option value="female">Female</Option><Option value="other">Other</Option></Select></Form.Item><Form.Itemname="remember"valuePropName="checked"wrapperCol={{ offset: 0, span: 24 }}><Checkbox>Remember me</Checkbox></Form.Item><Form.Item wrapperCol={{ offset: 0, span: 24 }}><Space><Button type="primary" htmlType="submit">Submit</Button><Button htmlType="button" onClick={onReset}>Reset</Button><Button type="dashed" htmlType="button" onClick={onFill}>Fill form</Button></Space></Form.Item></Form>);
};export default MyForm;

1. 我们首先引入了 Ant Design 提供的表单相关组件,包括 Form, Input, Select, Checkbox 和 Button。

2. 在 MyForm 组件中,我们使用 Form 组件定义了整个表单。通过 onFinish 属性指定了表单提交时的处理逻辑。

3. 接下来,我们使用 Form.Item 组件定义了表单字段,分别包括 Username, Password, Gender 和 Remember me 复选框。

4. 每个 Form.Item 都有一个 name 属性,用于标识该字段在表单数据中的 key。

5. 我们还通过 rules 属性为每个字段定义了校验规则,确保用户输入的数据符合要求。

6. 最后,我们添加了3个按钮,当用户点击按钮时,分别会自动进行校验并触发 onFinish 回调函数 提交表单、重置表单、回填表单数据。