介绍
pensee-react-jsonschema-form 是一个基于 React 的组件库，用于快速生成表单。它可以帮助开发者快速构建复杂的表单，而不必担心表单校验，表单布局等问题。
安装
npm install pensee-react-jsonschema-form --save
使用
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- -------------------------------
----- ------ - -
------ -------
----- ---------
--------- ----------
----------- -
------ ------ --------- ------ -------- -------- -- --- -------
----- ------ ---------- ------ -------- -------- ------
-
--
----- -------- - -
------ ------ ------
----- ----
--
----- --- - ------ -- ------------------------- ------
------ ------- ----- ---------------
-------------------
-------------------------
---------------------------
----------------------- ---参数
Form 组件接受以下参数：
- schema：定义表单的 JSON Schema，必须是对象类型；
- formData：定义表单初始数据，必须与 schema 的数据类型和结构匹配；
- uiSchema：定义表单的样式和布局，可以通过 CSS 来实现；
- widgets：定义某些控件的类型，如标题，时间选择器等；
- fields：定义表单中可用的控件，如文本框，选择框等；
- transformErrors：用于自定义表单校验错误处理函数；
- liveValidate：是否实时校验表单；
- validate：表单成功提交前的校验器回调函数；
- onBlur：单个表单控件失去焦点时的回调函数；
- onFocus：单个表单控件获取焦点时的回调函数；
- onChange：表单数据发生变化时的回调函数；
- onSubmit：表单提交时的回调函数；
- onError：表单校验不通过时的回调函数；
- onErrorSchema：校验错误的表单数据结构。
示例
简单表单
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- -------------------------------
----- ------ - -
------ -------
----- ---------
--------- ----------
----------- -
------ ------ --------- ------ -------- -------- -- --- -------
----- ------ ---------- ------ -------- -------- ------
-
--
----- -------- - -
------ ------ ------
----- ----
--
----- --- - ------ -- ------------------------- ------
------ ------- ----- ---------------
-------------------
-------------------------
---------------------------
----------------------- ---自定义属性
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- -------------------------------
----- ------ - -
------ -------
----- ---------
--------- ----------
----------- -
------ ------ --------- ------ -------- -------- -- --- -------
----- ------ ---------- ------ -------- -------- ------
-
--
----- -------- - -
------ -
---------- ------ --- ----- -- --- ------
----------------- ----- ------
--
----- -
---------- ------ --- --- -- --- ---- -- -----
-
--
----- --- - ------ -- ------------------------- ------
------ ------- ----- ---------------
-------------------
-------------------------
---------------------------
----------------------- ---自定义控件
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- -------------------------------
----- ------ - -
------ ------
----- ---------
--------- -------- -------- --------
----------- -
----- ------ --------- ------ ------- -------- ---------
------ ------ --------- ------ -------- -------- ------ ----
----- ------ ---------- ------ ------- -------- ----- -------- ------
--- -
----- ----------
------ --- -- -----
-------- ----
-
-
--
----- ------- - -
------------- ------- -- ------ -----------
------------------
-------------------
----------------- -- ----------------------------------- --
--
----- ------ - -
------------ ------- -- -
----- -
---
------
------------
------
---------
---------
-------
--------
-------
-----
-----------
- - ------
------ -
---- -------------------------
------ ----------------------------- - --- - -------------
------ -----------
-------
-------------------------
-------------
-------------------
----------------- -- -----------------------------
---------- -- -----------
----------- -- ------------ --
--------
------
-------------
------
--
-
--
----- -------- - -
------------ ---------------
------------- -
------------ -
---------- --------------
-
--
----------- --------------
------------- -
------ -----
-
--
----- --- - ------ -- ------------------------- ------
------ ------- ----- ---------------
-----------------
---------------
-------------------
-------------------------
---------------------------
----------------------- ---结语
pensee-react-jsonschema-form 是一个非常强大的表单组件库，支持自定义样式和控件，完全可以满足日常开发和定制需求。希望本篇文章能对读者有所帮助，让大家能够更加便捷地使用该组件库，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600d81e8991b448dde0a