前言
当我们搭建一个 React 的前后端分离项目时，一般需要使用 Redux 作为方案之一。在Redux中，我们经常使用 Redux-form 来管理表单。但是当表单中需要使用一些表单项时，Redux-form 并不直接提供相应的组件，这时我们可以选择经过封装的第三方组件库，如 redux-form-fields。
什么是 redux-form-fields
redux-form-fields 是一个围绕着 Redux-form 的表单组件库。它提供了很多常用的表单元素，如 input、textarea、Select等。在使用 Redux-form 时，我们可以直接使用它的封装组件来实现表单渲染。
安装
安装 redux-form-fields 相关依赖：
npm install --save react-redux redux redux-form lodash redux-form-fields@alpha
如何使用
Step1：引入依赖包
我们需要在我们的项目中引入 redux-form-fields 的依赖包。代码如下：
import { Field, FormSection } from 'redux-form'
import * as fields from 'redux-form-fields'Step2：使用 Field 组件渲染表单
接下来我们使用 Field 组件将表单项进行渲染，并且使用 redux-form-fields 提供的封装表单元素。示例代码如下：
<Field
name=“username”
label="用户名"
type="text"
component={fields.input}
/>刚才代码中，我们使用了 redux-form 的 Field 组件，通过 name 属性来确定表单项的 name，通过 component 属性来确定应该使用哪种表单类型。如果您要使用 Textarea，则 component 属性应该修改为fields.textarea。
Step3：封装表单组件
为了方便复用，我们可以将 Field 组件单独封装。示例代码如下：
-- -------------------- ---- -------
------ - ----- - ---- ------------
------ - -- ------ ---- -------------------
----- -------- - -- ----- ------ ----------- - --- ---- - ------ -- -- -
------
-----------
-------------
-------------------------
-----------
------------------------
--
-
----- ----------- - -- ----- ------ ----------- - --- ---- - ---------- -- -- -
------
-----------
-------------
-------------------------
-----------
---------------------------
--
-
现在，我们就可以使用我们所准备的封装表单组件。示例代码如下：
<AppInput name="username" label="用户名" placeholder="请输入用户名" />
总结
以上，我们介绍了一个 React 组件库中的 npm 包 redux-form-fields 的使用方式。在应用 Redux-form 时，通过使用 redux-form-fields，我们可以更方便快捷地实现表单渲染。本篇文章以实用性为主，帮助大家快速上手redux-form-fields。希望您可以在实际应用中顺利使用，并且发挥它所提供的价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d14