jsonmvc-module-ui 是一个前端的 npm 包，它提供了一些工具和模块，使得前端开发变得简单和迅速。在这篇文章中，我们将提供详细的步骤、代码示例和说明，以便使用该包的开发人员更好地理解它的使用。
开始使用
在本教程中，我们将使用一个新的 React 应用程序来说明如何使用 jsonmvc-module-ui 包。这个应用程序是一个基本的 To-Do 应用程序，它由一个实现了添加、删除和更新条目的表格组件构成。要使用 jsonmvc-module-ui , 首先需要通过 npm install 安装该包:
npm install jsonmvc-module-ui
接下来，我们需要在 React 组件中导入 jsonmvc-module-ui，以便在应用程序中使用它。在我们的示例中，我们需要导入 Field 和 FieldGroup 组件来处理表单数据。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---------- - ---- --------------------
----- -------- ------- --------------- -
-------- -
------ -
------
------------
------ ----------- --------------- ----------- ----- -------- --
------ ----------- ---------------------- ----------- ------------ -------- --
-------------
------- ----------------- -------------
-------
--
-
-
------ ------- ---------在上面的代码中，我们已将需要使用的 Field 和 FieldGroup 组件导入了组件中。然后我们渲染了一个表单，在表单中，我们使用 Field 组件创建两个文本输入框，用于输入条目名称和条目描述。这里，我们使用 “FieldGroup”组件将两个文本输入框捆绑在一起，这个组件可以轻松控制表单的一些属性。最后，我们还向Field 组件添加了 "required" 属性，这将强制用户必须填写这两个字段。
我们还可以使用 onFieldChange 回调来捕获表单字段值的变化，并将它们保存到我们的 React 组件的状态中。例如，我们可以添加以下代码来更新条目名称：
<Field type="text" name="ItemName" label="Item Name" required onFieldChange={(name, value) => {this.setState({itemName: value})}} />在这个例子中，我们添加了 onFieldChange 回调方法来捕获 "ItemName" 组件字段值的变化，并将 itemName 状态变量更新为当前值。
使用模块来简化表单
现在，我们已经学会了如何使用 Field 和 FieldGroup 来创建输入框和控制表单属性，但是我们还没学会如何处理和解析表单数据。接下来，我们将介绍 jsonmvc-module-ui 的 Form 和 FormPromise 模块，它们将简化表单处理过程。
在下面的示例中，我们将使用 Form 模块来处理表单数据。我们将添加一个 “submit” 方法，该方法使用 Form.getFormData() 方法将表单数据保存到变量 formData 中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ----------- ---- - ---- --------------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
--------- ---
---------------- --
--
-
------- - ------- -- -
-----------------------
----- -------- - --------------------------------------
-- ------------------ -- ------------------------- -
----- ----------- - ------------------------ ------ ------------------ ------------ ---------------------------
------------------------ ------------ --------- --- ---------------- -----
-
----------------------------
-
-------- -
------ -
----- ------------------------
------------
------ ----------- --------------- ----------- ----- --------------------------- -------- --------------------- ------ -- ------------------------- --------- --
------ ----------- ---------------------- ----------- ------------ ---------------------------------- -------- --------------------- ------ -- -------------------------------- --------- --
-------------
------- ----------------- -------------
-------
--
-
-
------ ------- ---------在上面的代码中，我们首先导入了 Form 模块，然后我们定义了一个名为 addItem 的方法，该方法将处理提交表单事件。在该方法中，我们首先使用 Form.getFormData() 方法获取表单数据，然后将条目名称和条目描述存储到一个新的 itemList 中。我们同样重置了表单数据并更新组件状态进行重新渲染。
使用 Promise 及验证表单
FormPromise 模块在 Form 模块的基础上，还提供了 Promise 功能和表单验证，并将让我们更容易地管理表单数据。在下面的示例中，我们使用 validate.js 库来验证输入的表单数据是否正确，如果验证失败，则阻止表单提交。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ----------- ----- ----------- - ---- --------------------
------ -------- ---- --------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
--------- ---
---------------- --
--
--------------- - -
--------- -
--------- - -------- ---- --- -- ------- -
-
--
-
------- - ------- -- -
-----------------------
----- -------- - --------------------------------------
----- ---------- - ----------------
----- ---- - --- ------------- ------ ---------- ---
----
-----------
-------- -- -
----- ----------- - ------------------------ ------ ------------------ ------------ ---------------------------
------------------------ ------------ --------- --- ---------------- -----
----------------------------
--
--------------- -- -
--------------------
---
-
-------- -
------ -
----- ------------------------
------------
------ ----------- --------------- ----------- ----- --------------------------- -------- --------------------- ------ -- ------------------------- --------- --
------ ----------- ---------------------- ----------- ------------ ---------------------------------- --------------------- ------ -- -------------------------------- --------- --
-------------
------- ----------------- -------------
-------
--
-
-
------ ------- ---------在上面的代码中，我们首先导入 validate.js 库来验证表单数据，然后我们定义了一个 fieldRules 对象，其中包含了我们要验证的表单字段规则。在提交处理程序中，我们首先使用 Form.getFormData() 方法获取表单数据，然后传递数据和规则到 FormPromise 实例化方法中，接着调用 validate 方法以验证表单数据值。如果验证通过，我们将添加条目并清除表单数据。如果验证不通过，则将错误消息输出到控制台。
结论
在这篇教程中，我们学会了使用 jsonmvc-module-ui 包的一些主要部分，它们能够显著减少前端表单处理的繁琐工作。总的来说，该包对于 JavaScript 和 React 开发者来说都是一个不错的工具集，它们可以在他们的工作中更容易地管理表单数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a830d09270238226cc