简介
@react-schema-form/core 是一个基于 React 的表单渲染解决方案。它基于 JSON Schema 定义，可以通过处理 JSON 数据生成表单视图，并可以对生成的表单进行一些基本的验证和提交处理。本文将介绍如何使用 @react-schema-form/core 包来渲染表单视图，并进行基本的验证和提交处理。
安装
使用 npm 安装：
npm install @react-schema-form/core
使用
渲染表单
首先，需要导入 SchemaForm 组件：
import SchemaForm from '@react-schema-form/core';
然后，可以通过定义 JSON 数据和对应的 JSON Schema 来生成表单视图。例如：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - -
------ -------
----- ---------
--------- -------- -------
----------- -
----- -
----- ---------
------ ----
--
---- -
----- ---------
------ ----
--
------ -
----- ---------
------- --------
------ ----
-
-
--
----- -------- - -
----- -
--------------- ----
--
---- -
------------ --------
--
------ -
------------ -------
-
--
----- -------- - -
----- -----
---- ---
------ ----------------------
--
----- --- - -- -- -
------ ----------- --------------- ------------------- ------------------- ---
--
------ ------- ----在以上代码中，我们定义好了要渲染的表单数据，包括 schema（JSON Schema）、uiSchema（表单样式）和 formData（表单数据）。然后传入 SchemaForm 组件即可渲染出表单。
表单验证
@react-schema-form/core 通过 ajv 进行表单数据验证。我们可以在 JSON Schema 中定义 required 字段来规定必填字段，也可以通过 pattern、maxLength、minimum 等属性来定义更复杂的校验规则。例如：
-- -------------------- ---- -------
----- ------ - -
------ -----
----- ---------
--------- ------------ ------------
----------- -
--------- -
----- ---------
------ -----
--
--------- -
----- ---------
------ -----
---------- -
-
-
--
----- -------- - ---
----- -------- - ---------- ------- -- -
-- ------------------ --- ------- -- ----------------- --- --------- -
---------------------------------
-
------ -------
--
----- ------ - -------- -- -
------------------------------ ----- ----
--
----- --- - -- -- -
------ ----------- --------------- ------------------- ------------------- ----------------- ---
--在以上代码中，我们在 JSON Schema 中定义了 required 字段来规定 username 和 password 为必填字段。我们还定义了 minLength: 6 来规定密码最短长度为 6。在 validate 函数中，我们可以自定义表单数据的验证规则，例如在本例中，如果用户名为 admin，密码不为 123456，则给 password 表单项添加错误提示。最后，在 onSubmit 回调函数中，我们可以获取到提交的表单数据，可以根据需求进行后续处理。
总结
使用 @react-schema-form/core 包可以快速方便地生成表单视图，并进行基本的数据验证和提交处理。掌握其使用方法和校验规则的定义，可以大大减少编写表单的时间和工作量，提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5e51ab1864dac6716a