自学内容网 自学内容网

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

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

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

  1. Form 组件

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

    • 包括 InputSelectCheckboxRadio 等常见的表单控件组件。
    • 这些组件可以通过设置 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, CheckboxButton

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

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

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

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

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


原文地址:https://blog.csdn.net/sky6862/article/details/137647997

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!