React 是一个甚至可以说是最流行的前端框架之一，而 JSON Schema 是一种结构化的数据格式，提供了一个通用的规范来描述数据。React-JSON-Schema-Form 是一个 React 组件，它可以根据 JSON Schema 自动生成用户界面，并且支持自定义表单控件和验证器。本文将介绍如何使用这个 npm 包来构建动态表单。
安装
使用 npm 或者 yarn 安装 react-json-schema-form：
--- ------- ------ ----------------------
or
---- --- ----------------------
导入
在您的 React 组件中导入 react-json-schema-form 和 json-schema：
------ ---- ---- ------------------------- ------ ------ ---- ----------------
schema.json是您的 JSON Schema 文件，详情后面会提到。
在您的渲染函数中添加表单：
----- --------------- --
至此，您现在有了一个简单的 JSON Schema 表单。下一步是添加一些用户交互。
选项
在渲染表单时，Form 组件支持许多选项。以下是一些常见的选项：
| 选项 | 描述 |
|---|---|
schema |
必须 - 包含FormData输入数据的JSON Schema实例。 |
uiSchema |
可选。为表单指定UI Schema，用于特定属性的展现和交互。 |
formData |
可选。在表单中使用的对象数据。如果省略，则数据将被初始化为空对象。 |
onSubmit |
可选。表单提交成功时触发的回调函数。 |
onError |
可选。当表单提交失败时触发的回调函数。 |
liveValidate |
可选。如果为 true，用户在编辑表单时会展示实时错误。默认为 false。 |
noHtml5Validate |
可选。如果为 true，表单将不使用 HTML5 表单验证规则。默认为 false。 |
classNames |
可选。生成的表单元素的 CSS 类。使用空格分隔的字符串或无序的 CSS 类对象。默认为「form」。 |
JSON Schema
每个表单都有一个 JSON Schema。JSON Schema 是一个用于描述数据格式的规范，它可以包含格式、类型和验证约束。React-JSON-Schema-Form 将 JSON Schema 转换为 Web 表单。
例如，以下是用于描述个人信息的 JSON Schema：
-
------- ---------
------------- -
------- -
------- ---------
------------ -
--
------ -
------- ---------
---------- --
---------- ---
-
-
-UI Schema
UI Schema 是用于调整 Web 表单显示外观和交互的 Schema。UI Schema 基于 JSON Schema，不过它专注于另一方面：如何以可预测的方式呈现表单元素。UI Schema 中，您可以：
- 为不同的 json-schema 元素指定不同的表单渲染器。
- 重写生成元素的默认属性。
- 指定数组和对象的属性。
以下是一个 UI Schema 示例：
-
------- -
------------- -----------
--------------- ----
--
------ -
------------ ---------
----------- ---- -- --------
----------------- ---------- ------
-
-在这个 UI Schema 中，我们指定了在渲染「name」属性时使用一个名为「col-md-6」的 CSS 类，以及使用 UI widget 「updown」渲染「age」属性。在「age」元素中，我们还指定了一个标题和描述。
用户交互
让我们来看一下如何响应表单交互。每当用户在表单中执行操作时，一个事件被触发。下面是一些常见的表单事件：
| 事件名称 | 描述 |
|---|---|
| onBlur | 元素失去焦点时触发。 |
| onFocus | 元素获得焦点时触发。 |
| onChange | 元素值改变时触发。 |
| onSubmit | 在提交表单时触发。 |
| onError | 如果数据验证失败，触发提交事件。 |
这是一个具有 onSubmit 事件的示例：
-------- - -- -------- -- -- - ---------------------- - ----- --------------- ------------------------ --
在这个例子中，我们定义一个名为 onSubmit 的回调，该回调在表单提交时从 formData 中打印 JSON 数据。
示例代码
以下是一个完整的示例代码：
------ ---- ---- -------------------------
------ ------ ---- ----------------
----- ------ ------- --------------- -
-------- - -- -------- -- -- -
----------------------
-
-------- -
------ -
-----
---------------
------------------------
-----------
------- -
------------- -----------
--------------- ----
--
------ -
------------ ---------
----------- ---- -- --------
----------------- ---------- ------
-
--
----------------------
--
--
-
-
------ ------- -------在此代码中，我们定义了一个名为 MyForm 的 React 组件，它包含一个 onSubmit 方法，该方法在表单提交时打印了 formData 数据。此组件使用以下属性：
schema使用我们的 schema.json 文件。uiSchema包含在上面的 UI Schema 示例中。noHtml5Validate禁用 HTML5 验证规则。
结论
React-JSON-Schema-Form 是一个非常有用的库，它可以以可预测的方式根据 JSON Schema 自动生成 Web 表单，使得表单设计更加简单高效。然而，学会使用该库需要对 JSON Schema 规范有一定了解。在您学会使用它之后，您可以更快、更安全地构建动态表单。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005626281e8991b448dfa96