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.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
        label="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.Item
        name="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 回调函数 提交表单、重置表单、回填表单数据。