react antd5 form 表单源码解析
Ant Design是一个流行的React UI 库，而Form是其核心组件之一，用于构建表单。antd （Ant Design 的简称）的Form组件提供了一系列实用的功能，如表单验证、表单项的自动管理、表单状态管理等。
在antd的Form组件中，有几个关键的组件和方法可以帮助我们理解和使用这个组件。Form 组件
•属性: Form组件接收一些属性，如initialValues（初始值）、onValuesChange（值变化时的回调）、validateTrigger（验证触发的时机）等。
•Form.Item: 用于包裹表单项，提供了一些有用的属性和方法，如rules（验证规则）、name（字段名）、fieldProps（字段属性）等。
表单项(Form.Item)
•属性: 如前所述，Form.Item有一些重要的属性，如rules、name和fieldProps。其中，rules是一个验证规则数组，用于定义该表单项的验证逻辑。
•事件: 表单项可以监听一些事件，如onChange（值变化时触发）、onBlur（失去焦点时触发）、onFocus（获得焦点时触发）等。
验证规则(rules)
•验证规则是一个数组，每个元素都是一个对象，定义了验证逻辑。例如：[{ required: true, message: '这个字段是必填的！' }]。
•可以使用自定义验证器函数。例如：{ [rule.field]: [({ getFieldValue }) => ({ required: true, message: '这个字段是必填的！' })] }。
示例代码
下面是一个简单的Form表单示例：
jsx复制代码
import React from'react';
import { Form, Input, Button } from'antd';
const Demo = () => {
const onFinish = (values) => {
onblur和blur的区别
console.log('Received values of form: ', values);
};
return (
<Form name="normal_login" onFinish={onFinish}>
<Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名!' }]}>
<Input />
</Form.Item>
<Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码!' }]}>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
);
};
export default Demo;
在这个示例中，我们创建了一个简单的登录表单，包含用户名和密码两个字段。每个字段都使用了Form.Item来包裹，并设置了相应的验证规则。当用户点击提交按钮时，会触发表单的提交事件，调用onFinish回调函数。