ReactJS UI Ant 设计表单组件

Ant Design Library 已经预先构建了这个组件，并且它也很容易集成。当用户需要创建实例或收集信息时使用表单组件。我们可以在 ReactJS 中使用以下方法来使用 Ant Design Form 组件。

表单道具：

冒号：用于配置Form.Item 的默认冒号值。
component：用于设置Form渲染元素。
fields：用于表示通过状态管理对表单字段的控制。
form：用于表示Form.useForm()创建的表单控件实例。
initialValues：用于通过Form初始化或重置设置值。
labelAlign：用于表示所有项目标签的文本对齐。
labelCol：用于表示标签布局，如组件。
layout：用于表示表单布局。
name：用于表示Form名称。
保留：即使字段被删除，它也用于保留字段值。
requiredMark：用于Required标记样式。
scrollToFirstError：用于提交时自动滚动到第一个失败的字段。
size：用于设置字段组件大小。
validateMessages：用于验证提示模板。
validateTrigger：用于表示配置字段验证触发器。
wrapperCol：用于表示输入控件的布局。
onFieldsChange：字段更新时触发的回调函数。
onFinish：是提交表单并验证数据成功后触发的回调函数。
onFinishFailed：是提交表单并验证数据失败后触发的回调函数。
onValuesChange：值更新时触发的回调函数。

Form.Item 道具：

冒号：与标签一起使用，标签文本后是否显示颜色(:)。
dependencies：用于设置依赖字段。
extra：用于表示额外的提示信息。
getValueFromEvent：用于指定如何从事件或其他onChange参数中获取值。
getValueProps：用于获取带有子组件的 Additional props。
hasFeedback：与验证状态一起使用，此选项指定验证状态图标。
help：用于表示提示信息。
hidden：用于指示是否隐藏Form.Item 。
htmlFor：用于设置子标签htmlFor。
initialValue：用于配置子默认值。
label：用于表示Label文本。
labelAlign：用于表示标签的文本对齐。
labelCol：用于表示标签的布局。
messageVariables：用于表示默认的验证字段信息。
name：用于表示名称。
normalize：用于在传递给 Form 实例之前对组件值的值进行规范化。
noStyle：用作纯字段控件。
保留：即使字段被删除，它也用于保留字段值。
required：用于显示需要的样式。它是由验证规则生成的。
rules：用于表示字段验证的规则。
shouldUpdate：用于自定义字段更新逻辑。
tooltip：用于配置工具提示信息。
触发器：用于指示何时收集子节点的值。
validateFirst：用于指示是否对该字段的第一个错误规则停止验证。
validateStatus：用于表示验证状态。
validateTrigger：用于指示何时验证子节点的值。
valuePropName：用于表示子节点的道具。
wrapperCol：用于表示输入控件的布局。

Form.List 道具：

孩子们：这是一个渲染函数。
initialValue：用于表示配置子默认值。
name：用于表示字段名称。
rules：用于验证规则。

Form.ErrorList 道具：

errors：用于表示错误列表。

Form.Provider 道具：

onFormChange：是一个回调函数，当子表单字段更新函数时触发。
onFormFinish：是子表单提交时触发的回调函数。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install antd
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
import "antd/dist/antd.css";
import { Form, Button, Input } from 'antd';
  
export default function App() {
  
    return (
        
            ReactJS Ant-Design Form Component
             alert('Failed to submit')}
                onFinish={() => alert('Form Submitted')}
                initialValues={{ remember: true }}
            >
             
              
             
             
              
             
            
        
    );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://ant.design/components/form/