前言
fis-msprd-rc-form_1_3_0 是一个基于 React 的高阶表单组件库，可以帮助前端开发人员快速构建复杂的表单。
本文将对该组件库进行详细介绍，涵盖以下内容：
- fis-msprd-rc-form_1_3_0 的安装；
- fis-msprd-rc-form_1_3_0 的使用；
- fis-msprd-rc-form_1_3_0 的深度介绍；
- 附有示例代码。
fis-msprd-rc-form_1_3_0 的安装
你可以通过以下命令来安装 fis-msprd-rc-form_1_3_0：
npm install fis-msprd-rc-form_1_3_0 --save
fis-msprd-rc-form_1_3_0 的使用
使用 fis-msprd-rc-form_1_3_0 可以帮助你快速创建复杂的表单。下面是一个简单的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- --------------------------
----- ------ ------- --------- -
------------ - --- -- -
-------------------
----- - ---- - - -----------
------------------------- ------- -- -
-- ------ -
--------------------- ------ -- ----- -- --------
-
---
--
-------- -
----- - ----------------- - - ----------------
------ -
----- -----------------------------
-----
------------------------------ -
------ -- --------- ----- -------- ------- ----- ---- ---------- ---
---
------ ----------- ---------------------- ---
--
------
-----
------------------------------ -
------ -- --------- ----- -------- ------- ----- ---- ---------- ---
---
------ --------------- ---------------------- ---
--
------
-----
------- -----------------------------
------
-------
--
-
-
----- ------------- - ---------------------
------ ------- --------------在上面的示例中，我们首先引入了 createForm 方法，并将其包装到 MyForm 组件上。接着，在 handleSubmit 方法中，我们通过调用 form.validateFields 方法来验证表单是否通过。
在 render 函数中，我们用 getFieldDecorator 方法来为表单的每一个字段进行校验规则的定义。该方法接受两个参数，第一个参数是字段的名称，第二个参数是该字段的校验规则。
通过这样的方法，我们就可以完成一个非常基础的表单验证工作，下面我们将深入介绍 fis-msprd-rc-form_1_3_0 的使用方法。
fis-msprd-rc-form_1_3_0 的深度介绍
createForm
createForm 是 fis-msprd-rc-form_1_3_0 的核心方法，其作用是将一个组件包装成高阶表单组件。
const WrappedForm = createForm(options)(MyForm);
PackOptions 为一个对象，支持如下属性：
- withRef：boolean，是否控制组件实例的 ref 属性；
- mapProps：转义组件属性，返回一个与输入属性相同的新属性。
- validateMessages：{}，自定义校验错误时的信息。
上面的 WrappedForm 组件就可以使用 getFieldDecorator 等 API 来操作表单了。
getFieldDecorator
getFieldDecorator 是 fis-msprd-rc-form_1_3_0 最重要的方法，它会传递一个新函数给我们的组件，在每个字段校验的过程中都会被自动调用。具体方法如下：
getFieldDecorator(id: string, options?: Object): (node: ReactElement) => ReactElement;
id：需要校验的字段名，必填。
options：可选参数，详见下表：
| 参数名 | 类型 | 描述 |
|---|---|---|
| initialValue | any | 字段的初始值 |
| rules | array | 字段校验规则 |
| trigger | string | 改变字段值的事件，支持 blur/change 等事件 |
| valuePropName | string | 子节点的 value 值的属性名，默认是 value |
| validateTrigger | string | 校验子节点值的事件，支持 blur/change 等事件 |
| validateFirst | boolean | 是否在第一个校验规则失败后停止校验 |
| normalize | function | 手动调整子节点的值，可以在传递给 getFieldDecorator 之前使用 |
| dependencies | string[] | 当前字段的值发生改变时，需要一并校验的其他字段 |
该方法返回一个高阶函数，需要传入一个 ReactElement （如 <input />）。
validateFields
validateFields 用于按需校验所有的子节点。
validateFields(fieldNames?: Array<string>, options?: Object, callback: ValidateCallback): void;
- fieldNames：可选。需要校验的子节点 id 数组，默认是全部子节点。
- options：可选。配置对象，详见下表：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| firstFields | string[] | 只校验某些指定的字段 | |
| force | boolean | false | 是否强制校验 |
| scroll | Object | false | 是否滚动到第一个报错的地方 |
| suppressWarning | boolean | false | 是否展示默认校验警告 |
| messageVariables | Object | 自定义错误提示信息 |
- callback：校验回调函数。该函数会在校验后被执行，参数是一个对象，返回值为校验通过的字段和校验失败的字段。
getFieldError
getFieldError 方法用于获取指定id的字段错误信息。
getFieldError(name: string)
isFieldsTouched
判断所有或部分子节点是否被点击过。
isFieldsTouched(names?: string[]): boolean
- names：可选。需要判断的子节点 id 数组，默认为全部子节点。
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- --------------------------
----- ------ ------- --------- -
------------ - --- -- -
-------------------
----- - ---- - - -----------
------------------------- ------- -- -
-- ------ -
--------------------- ------ -- ----- -- --------
-
---
--
-------- -
----- - ----------------- - - ----------------
----- --------------- - -
------ -- --------- ----- -------- -------- -- ------------
-
------ -
----- -----------------------------
-----
------------------------------ -
------ -- --------- ----- -------- ------- ----- ---- ---------- ---
---
------ ----------- ---------------------- ---
--
------
-----
------------------------------ -
------ -- --------- ----- -------- ------- ----- ---- ---------- ---
---
------ --------------- ---------------------- ---
--
------
-----
------------------------------ -----------------
--------- ------------------ ---- ---- ------ --
--
------
-----
------- -----------------------------
------
-------
--
-
-
----- ------------- - ---------------------
------ ------- --------------结语
本文介绍了 fis-msprd-rc-form_1_3_0 的安装、使用、深入介绍以及示例代码，相信读者可以从中获得一些有价值的经验和教训。前端开发是一项非常复杂的工程，需要我们不断学习和提高自己的技能，希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005516381e8991b448ce8d7