在前端开发中，表单是一个非常重要的组件。但是手写表单需要考虑很多细节，这会浪费大量的时间和精力。而使用第三方库能够快速方便地构建表单，同时保证代码质量和易于维护性。
在这篇文章中，我们将介绍一个值得推荐的表单库——@mizmoz/react-forms。我们将详细讲解这个库的使用方法以及如何将其应用到实际项目中。
安装
安装 @mizmoz/react-forms，可以使用 npm：
npm install @mizmoz/react-forms
或者使用 yarn：
yarn add @mizmoz/react-forms
使用
在开始使用 @mizmoz/react-forms 之前，需要先在项目中引入 React 库。此外，还需要引入 FormGroup 组件、 FormField 组件和表单数据源。可以将表单数据源保存在 Redux store 或者其他数据管理库中。
下面我们来编写一个示例表单。
首先进行一些初始化工作。创建表单数据源并 import 所需要的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- --------- - ---- ----------------------
------ - ------- - ---- --------------
------ - -------------- - ---- ---------------
----- ------ - -- --------- -------------- -- -- -
----- ----------------- - ------- -- -
----- ------ - -------------
----- ----- - ----------- --- ---------- - -------------- - -------------
----- ---- - ------------
----------------
------------
------- -----
---
--
------ -
------
---------- -----------
---------- ----------- ---------------------------- -------------------- -- --- --
------------
---------- -----------
---------- ------------ ---------------------------- --------------------- -- --- --
------------
---------- -----------
---------- ----------- ---------------------------- -------------------- -- --- --
------------
------- -------------------------
-------
--
--
----- --------------- - ----- -- --
--------- --------------
---
----- ------------------ - -------- -- --
--------------- -------- -- ----------------------------------
---
------ ------- ------------------------ ----------------------------在这个示例代码中，我们创建了一个名为 MyForm 的组件。这个组件中包括多个 FormGroup 元素，每个 FormGroup 元素都包括 FormField 元素。FormGroup 用于包装表单元素并显示它们的标签。FormField 是一个输入框或者其他的表单控件，它包含了表单数据的值和 onChange 事件。
在我们的表单中，所有的 Input 都是使用的 FormField ， 通过设置其 onChange 方法来保存数据
关于数据的传递我们在后续会讲解。
表单校验
表单校验是表单捕捉用户输入错误的重要方法。表单校验也是 @mizmoz/react-forms 的一个重要功能。
我们来实现一个简单的校验规则。当输入的邮箱地址不含有 @ 符号时，给出提示信息。
const validateEmail = (value) => {
if (value && value.indexOf('@') === -1) {
return '邮箱必须包含 @ 字符';
}
};接下来我们只需要在表单中调用 validateEmail 就可以执行验证。
<FormGroup label="邮箱" validation={validateEmail}>
<FormField name="email" onChange={handleInputChange} value={formData.email || ''} />
</FormGroup>我们在 FormGroup 中设置了 validation 属性，值为 validateEmail 。这意味着在表单提交之前，将检查表单数据是否有效。validation 函数接受表单值作为参数，并根据其返回值来确定是否有效。如果 validation 函数返回一条错误消息或者 false，则表单的提交将被中止，并显示一个错误提示框。
结合 Redux
@mizmoz/react-forms 库适用于 Redux，因为它提供了一个非常易于使用的方式来将表单数据集成到 Redux store 中。
我们先创建一个 action 文件，然后在组件中 connect Redux store。
-- -------------------- ---- -------
-- ----------
------ ----- ---------------- - -------------------
------ ----- -------------- - ------ -- -
------ -
----- -----------------
-------- ----
--
--然后在 reducers 中创建一个名为 formData 的状态来保存表单数据：
-- -------------------- ---- -------
----- ------------ - -
--------- --
--
------ ----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------------
------ -
---------
--------- --------------
--
--------
------ ------
-
--将表单集成到 Redux store 中非常简单，只需要在组件中将表单数据作为 props 传递到 FormGroup 和 FormField 组件即可。
-- -------------------- ---- ------- ----- --------------- - ----- -- -- --------- -------------- --- ----- ------------------ - -------- -- -- --------------- -------- -- ---------------------------------- --- ------ ------- ------------------------ ----------------------------
结论
通过本文的介绍，相信你已经学会了如何使用 @mizmoz/react-forms 库来快速、方便地构建表单，以及如何将表单数据集成到 Redux store 中。
不仅如此，@mizmoz/react-forms 还支持更多高级功能，例如表单联动和异步数据加载，可以根据实际业务需要灵活选择和配置，提高表单使用和交互的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005547181e8991b448d1b9e