Ant Design 的表单组件设计得非常出色,极大地简化了表单开发的复杂度,让开发者能够快速构建出功能丰富、交互友好的表单界面。
接下来总结一下 Ant Design 中表单的基本用法。
-
Form 组件
- 用于定义整个表单,可以设置表单的布局方式、提交行为等。
- 通常会将表单字段组件嵌套在
Form
内部使用。
-
表单字段组件
- 包括
Input
、Select
、Checkbox
、Radio
等常见的表单控件组件。 - 这些组件可以通过设置
name
属性与表单数据进行绑定。
- 包括
-
表单布局
- Ant Design 提供了两种常见的表单布局方式: 水平布局和垂直布局。
- 可以通过
Form
组件的layout
属性进行设置, 默认为水平布局。
-
表单校验
- Ant Design 内置了强大的表单校验功能,开发者可以使用
rules
属性定义校验规则。 - 当表单提交时,表单会自动进行校验,并在发现错误时进行提示。
- Ant Design 内置了强大的表单校验功能,开发者可以使用
-
表单提交
- 通过
onFinish
属性可以监听表单提交事件,在此回调函数中处理表单数据的提交逻辑。 - 表单组件会自动管理表单的提交状态,开发者只需关注业务逻辑即可。
- 通过
-
表单重置
- 表单组件提供了
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;
-
我们首先引入了 Ant Design 提供的表单相关组件,包括
Form
,Input
,Select
,Checkbox
和Button
。 -
在
MyForm
组件中,我们使用Form
组件定义了整个表单。通过onFinish
属性指定了表单提交时的处理逻辑。 -
接下来,我们使用
Form.Item
组件定义了表单字段,分别包括Username
,Password
,Gender
和Remember me
复选框。 -
每个
Form.Item
都有一个name
属性,用于标识该字段在表单数据中的 key。 -
我们还通过
rules
属性为每个字段定义了校验规则,确保用户输入的数据符合要求。 -
最后,我们添加了3个按钮,当用户点击按钮时,分别会自动进行校验并触发
onFinish
回调函数 提交表单、重置表单、回填表单数据。