在 React 开发中，表单组件是不可避免的一部分，特别是在处理用户交互的过程中。@kirpich634/react-redux-form 是一个 React 表单组件库，该库基于 Redux，它可以帮助我们更快捷地开发 React 表单。
安装
安装 @kirpich634/react-redux-form 可以使用 npm 或者 yarn 命令，如下：
npm install @kirpich634/react-redux-form # or use yarn yarn add @kirpich634/react-redux-form
用法
使用之前，我们需要先初始化一个 store。下面的代码片段演示了如何用 redux 创建一个表单 store：
import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from '@kirpich634/react-redux-form'
const rootReducer = combineReducers({
form: formReducer
})
const store = createStore(rootReducer)接下来，我们可以开始使用表单组件库了。
在一个 React 组件中，我们需要定义一个表单，定义表单元素、验证规则以及提交事件等。下面的代码示例中，我们定义一个表单组件并添加一个输入框和一个提交按钮。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ --------- - ---- ------------------------------
----- -------- - ------ -- -
------------------- -- ----------
-
--- ----------- - ----- -- -
----- - ------------ - - -----
------ -
----- ----------------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
------- -----------------------------
-------
-
-
----------- - -----------
----- --------- -- ----
---------------
------ ------- -----------通过上述代码的解释，我们能够了解 @kirpich634/react-redux-form 主要由以下几个部分组成：
Field组件：用于定义表单元素，例如输入框、下拉框、单选框、复选框等。由于它是受控组件，因此需要一个名为name的 prop。reduxForm函数：用于将表单从 Redux store 中分离出来。它包含一个名为form的 prop，用于指定表单名称。
在表单组件中，我们传递一个名为 handleSubmit 的 prop 给表单，让它处理表单的提交事件。
接下来，我们可以将表单组件渲染到页面：
import React from 'react'
import ReactDOM from 'react-dom'
import ExampleForm from './ExampleForm'
ReactDOM.render(
<ExampleForm />,
document.getElementById('root')
)在页面中，我们会看到一个输入框和一个提交按钮。当我们输入文字并点击提交按钮时，会打印出该表单元素的值。
除了表单元素和表单提交事件之外，@kirpich634/react-redux-form 还提供了一些其他有用的组件和功能，例如：
Form组件：可以方便地创建多个表单元素。它也是一个受控组件，需要声明一个onSubmit函数。- 同步和异步验证器：用于验证表单元素的值是否符合预期。验证器可以使用
redux-form组件的validate或者asyncValidate函数来实现。 FieldArray组件：用于处理数组类型表单元素，例如一个电话号码列表。
示例代码
下面的代码示例展示了如何创建一个联系人表单，包含一个输入框和多个电话号码输入框。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ ----------- --------- - ---- ------------------------------
----- -------- - ------ -- -
------------------- -- ----------
-
----- ----------------- - -- ------ -- -- -
----
------------------- ------ -- -
--- ------------
------
------------------------
-----------
-----------------
------------------ -------
---- --
------- ------------- ----------- -- ----------------------
------
---------
-----
---
----
------- ------------- ----------- -- -----------------
--- ----- ------
---------
-----
-----
-
--- ----------- - ----- -- -
----- - ------------ - - -----
------ -
----- ----------------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------
-----
----------- ------------------- ----------------------------- --
------
------- -----------------------------
-------
-
-
----------- - -----------
----- --------- -- ----
---------------
------ ------- -----------在上述代码中，我们使用了 FieldArray 组件来处理 phoneNumbers 这个数组类型的表单元素，它允许我们使用一个函数来渲染多个表单元素。同时，我们还定义了一个 renderPhoneNumber 函数，用于生成电话号码输入框。在该函数中，我们使用了 fields.map() 方法来生成多个电话号码输入框，并使用 fields.push() 和 fields.remove() 方法来添加和删除数组元素。
结论
@kirpich634/react-redux-form 是一个非常方便的表单组件库，它基于 Redux 架构，提供了丰富的表单元素、验证器和其他有用的组件和功能。使用它可以帮助我们更快捷地开发 React 表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822678