简介
Redux-schema-form 是基于 React 和 Redux 的表单生成器，它封装了 Redux 和 react-jsonschema-form 库，使得表单的使用和维护变得异常简单。本文将带领大家学习和使用 redux-schema-form 包来实现表单的快速构建。
安装
使用 npm 安装 redux-schema-form：
npm install --save redux-schema-form
使用
- 导入需要的依赖
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----------- - ---- -------- ------ - -------- - ---- -------------- ------ - ----------------- ----- - ---- -------------------- ------ - ------ - ---- ----------- ------ - -------- - ---- ------------- ------ - ------------- - ---- ------------------ ------ - ------ - ---- ----------- ------ - ------------- - ---- ------------------ ------ - --------------- - ---- --------------------
- 创建 store
const store = createStore(
(state = {}) => state,
);- 创建 JSON Schema Form
const Form = createSchemaForm({
schema,
uiSchema,
customFormats,
fields,
submitHandler,
validateHandler,
});- 渲染 JSON Schema Form
-- -------------------- ---- -------
----- --- - -- -- -
--------- --------------
-------
----- --
--------
-----------
--
-------------------- --- ---------------------------------示例
JSON Schema
-- -------------------- ---- -------
------ ----- ------ - -
----- ---------
----------- -
---------- -
----- ---------
------ ------ -----
--
--------- -
----- ---------
------ ----- -----
--
---- -
----- ----------
------ -----
--
------ -
----- ---------
------- --------
------ -------
--
--------- -
----- ---------
------- -----------
------ ----------
-
--
--------- ------------- ----------- ------ -------- -----------
--UI Schema
-- -------------------- ---- -------
------ ----- -------- - -
----------- ------------- ----------- ------ -------- ------------
---------- -
--------------- -----
----------------- ------ -----
--
--------- -
----------------- ----- -----
--
---- -
------------ ---------
----------- ---- -- --------
----------------- ---------- ------
--
------ -
------------ -------
--
--------- -
------------ ----------
-
--Custom Formats
export const customFormats = {
password: /^\S*(?=\S{8,})(?=\S*[a-z])(?=\S*[A-Z])(?=\S*[\d])\S*$/
};Form Fields
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------------
------ ----- ------ - -
-------------- ----- -- -
---- ---------------------------
-------------- -------------------------------------------
------
-
--Submit Handler
export const submitHandler = (formData, dispatch) => {
console.log(formData);
};Validate Handler
export const validateHandler = (errors, errorSchema) => {
console.log(errors);
};总结
本文介绍了如何使用 npm 包 redux-schema-form 来实现表单的快速构建，包括了安装、导入依赖、创建 store、创建 JSON Schema Form 和渲染 JSON Schema Form 的步骤，并提供了示例代码进行演示。希望本文能对大家的学习和使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8ac4