前言
在前端开发中，经常需要实现复杂的表单操作。Redux-form 是目前常用的 React 表单处理库，它提供简单的 API 同时支持表单校验和异步操作。
然而，Redux-form 默认样式较为简单，满足不了项目中复杂的需求。为了解决这个问题，开发者经常需要花费大量时间修改 CSS 样式，这对于繁忙的开发节奏来说是一件非常麻烦的事情。
幸运的是，Redux-form-moblee-ui 库的出现解决了这个问题。它提供了许多高级 UI 控件和默认样式，可以极大的简化表单 UI 设计流程，同时提升用户体验。在接下来的文章中我们会针对这个库的使用流程进行详细介绍。
安装
使用 npm 进行安装：
$ npm install --save redux-form-moblee-ui
安装成功后，可以使用以下命令引入库：
import { Field, reduxForm } from 'redux-form'
import { MobleeInput } from 'redux-form-moblee-ui'基础使用
Redux-form-moblee-ui 对于 Redux-form 提供了多种高级 UI 控件，这些控件可以减少开发量，提升用户体验。目前支持的 UI 控件包括： MobleeInput, MobleeSelect, MobleeCheckbox, MobleeDatePicker 等。
为了演示如何使用这些控件，以下我们提供一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ --------- - ---- ------------
------ - ----------- - ---- ----------------------
----- ------ - ------- -- -
----- - ------------ - - -----
------ -
----- ------------------------
-----
------ ------------------------- ------------
------
----------------
-----------------------
-----------
------------------ ---- ----- -----
--
------
-------
-
-
------ ------- ----------- ----- -------- ----------在上述例子中，我们通过 reduxForm 函数将 MyForm 组件包装为 Redux-form 表单，并使用 MobleeInput 控件渲染表单输入框。
运行以上代码会发现，表单 UI 的确变得非常漂亮。
高级使用
在某些情况下，开发者可能需要自定义表单 UI 控件样式或者扩充控件 API。Redux-form-moblee-ui 提供了组件属性透传功能，允许开发者在不破坏库原有 API 的情况下实现自定义行为。
接下来，我们演示如何自定义表单控件样式。
首先，我们需要创建一个 CSS 文件，用于覆盖默认样式：
/* my-form-styles.css */
.my-input {
border-radius: 5px;
border: 2px solid #dedede;
padding: 10px;
}然后，在代码中引入刚刚创建的样式文件：
-- -------------------- ---- -------
-- --------- --
------ ----- ---- -------
------ - ------ --------- - ---- ------------
------ - ----------- - ---- ----------------------
------ ----------------------
----- ------ - ------- -- -
----- - ------------ - - -----
------ -
----- ------------------------
-----
------ ------------------------- ------------
------
----------------
--------------------
-----------------------
-----------
------------------ ---- ----- -----
--
------
-------
-
-
------ ------- ----------- ----- -------- ----------运行以上代码，我们会发现，MobleeInput 控件的样式已经被覆盖，变成了我们定义的样子。
总结
Redux-form-moblee-ui 是一个非常实用的 UI 库，它为开发者提供了许多高级表单控件和默认样式，可以大大简化表单 UI 设计流程，提升用户体验。在使用时，开发者可以通过基础使用和高级使用两种方法实现自定义控件行为。希望这篇教程能帮助到从事前端开发的同学们，并提升他们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2481e8991b448dadb2