在现代 Web 应用程序中，数据是无处不在的。对于大多数前端开发者来说，经常需要使用 Firebase 这类云服务，来托管和管理应用数据。在使用 Firebase 管理数据时，与之相关的表单处理和输入验证十分重要。
在本文中，我们将介绍一个可在 React 应用程序中使用的 npm 包：react-firebase-schema-form，它提供了一种使用熟悉的 JSON Schema 来定义表单的方式，并轻松集成 Firebase 数据库的能力。
1. 安装
通过 npm 安装 react-firebase-schema-form：
npm install react-firebase-schema-form
2. 简介
react-firebase-schema-form 是一个基于 React 和 Firebase 的表单组件库，它可以帮助你在应用程序中轻松定义和渲染表单，同时自动执行验证和存储数据。
该组件库重新实现了 JSON Form 项目的核心思想，它使用 JSON Schema 定义表单，并提供了可定制的渲染和验证功能。
3. 使用 react-firebase-schema-form
一旦你完成了安装，你就可以使用 react-firebase-schema-form 创建复杂的表单组件。
首先，我们需要在 React 的组件树中引入 react-firebase-schema-form：
import ReactFirebaseSchemaForm from 'react-firebase-schema-form';
然后，我们需要准备一个 JSON Schema，以描述我们希望用户输入哪些数据。例如，我们可以创建一个简单的登录表单：
-- -------------------- ---- -------
----- ------ - -
------ -----
----- ---------
--------- --------- ------------
----------- -
------ -
----- ---------
------ ------
--
--------- -
----- ---------
------ ----
-
-
--在这个例子中，我们定义了表单标题、必需的电子邮件和密码字段以及每个字段的标题。接下来，我们需要为数据定义一个 Firebase 引用：
const firebaseRef = firebase.database().ref('/users/');然后，我们可以使用 react-firebase-schema-form 渲染表单：
<ReactFirebaseSchemaForm schema={schema} firebaseRef={firebaseRef} />完成以后，react-firebase-schema-form 将生成一个默认渲染的登录表单，同时自动保存输入的数据到 Firebase 数据库。
3.1 可选项
react-firebase-schema-form 支持许多可选的 props，以便你可以完全控制表单组件的渲染、验证和数据处理。
3.1.1 initialValues
如果你需要在表单上渲染已有数据，那么可以将 initialValues 属性传递给 <ReactFirebaseSchemaForm> 组件：
const initialValues = { email: 'youremail@example.com', password: 'P@$$w0rd' };
<ReactFirebaseSchemaForm
schema={schema}
firebaseRef={firebaseRef}
initialValues={initialValues}
/>3.1.2 validate
我们可以传递一个可选的 validate 函数，该函数将负责验证表单数据，以及在表单验证失败时返回错误消息。
-- -------------------- ---- -------
----- -------- - -------- -- -
----- ------ - ---
-- ----------------- -
------------ - -------------
-
-- -------------------- -
--------------- - ---------
-
------ -------
--
------------------------
---------------
-------------------------
-------------------
--3.1.3 onChange
我们可以传递一个可选的 onChange 函数，该函数将在表单数据更改时被调用。
-- -------------------- ---- ------- ----- -------- - -------- -- - ---------------------- ---------- -- ------------------------ --------------- ------------------------- ------------------- --
3.1.4 onSubmit
我们可以传递一个可选的 onSubmit 函数，该函数将在表单提交时被调用：
-- -------------------- ---- ------- ----- -------- - -------- -- - ---------------------- ---------- -- ------------------------ --------------- ------------------------- ------------------- --
3.1.5 uiSchema
我们可以使用 uiSchema 将自定义样式、类名和其他 React props 应用到渲染的表单组件中。这个选项能够完全自定义表单的渲染方式。
-- -------------------- ---- -------
----- -------- - -
------ -
----------- ------------ ----------
--
--------- -
------------ -----------
----------- ------------ ----------
--
------------ -
------ -----
--------- ----
-
--
------------------------
---------------
-------------------------
-------------------
--3.2 使用示例
下面是一个完整的使用 react-firebase-schema-form 创建简单登录表单组件的代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ---------------
------ --------------------
------ ----------------------- ---- -----------------------------
----- ------ - -
------ -----
----- ---------
--------- --------- ------------
----------- -
------ -
----- ---------
------ ------
--
--------- -
----- ---------
------ ----
-
-
--
----- ----------- - -----------------------------------
----- -------- - -------- -- -
----- ------ - ---
-- ----------------- -
------------ - -------------
-
-- -------------------- -
--------------- - ---------
-
------ -------
--
----- ----- - -- -- -
---- ----------------------
-----------------
------------------------
---------------
-------------------------
-------------------
-----------
------ -
----------- ------------ ----------
--
--------- -
------------ -----------
----------- ------------ ----------
--
------------ -
------ -----
--------- ----
-
--
------------------ -- -
----------------------- ----------
--
--
------
--
------ ------- ------4. 总结
react-firebase-schema-form 是一个用于 React 应用程序的可扩展表单组件库。它使用 JSON Schema 和 Firebase 数据库，帮助开发者快速构建定制化的、动态的表单。
在使用 react-firebase-schema-form 时，请不要忘记为组件传递一个必需的 Firebase 引用对象，并选择合适的 JSON Schema、validate 函数和 uiSchema，以控制表单的验证、渲染和交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563c681e8991b448e1253