NPM 包 react-json-schema-form 使用教程-JavaScript中文网-JavaScript教程资源分享门户

React 是一个甚至可以说是最流行的前端框架之一，而 JSON Schema 是一种结构化的数据格式，提供了一个通用的规范来描述数据。React-JSON-Schema-Form 是一个 React 组件，它可以根据 JSON Schema 自动生成用户界面，并且支持自定义表单控件和验证器。本文将介绍如何使用这个 npm 包来构建动态表单。

安装

使用 npm 或者 yarn 安装 react-json-schema-form：

npm install --save react-json-schema-form

yarn add react-json-schema-form

导入

在您的 React 组件中导入 react-json-schema-form 和 json-schema：

import Form from "react-json-schema-form";
import schema from "./schema.json";

schema.json 是您的 JSON Schema 文件，详情后面会提到。

在您的渲染函数中添加表单：

<Form schema={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 }) => {
  console.log(formData);
}

<Form schema={schema} onSubmit={this.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