#npm包@knax/redux-form-material-ui 使用教程
###前言：
随着近些年前端技术的迅猛发展，前端框架和工具的可塑性越来越高，npm已然成为前端最重要的资源库之一。在这篇文章里，我们将要讲解一个npm包，@knax/redux-form-material-ui ，并且通过详细且有深度和学习意义的教程来介绍如何使用此npm包。
简介：
@knax/redux-form-material-ui是为React JS设计的使用Material UI的Redux表单。Redux-Form是Redux框架下极其优秀的表单处理处理方式。它可以通过一个完整的表单状态以及常用的表单处理功能来处理表单的各个状态，包括表单验证、表单初始化等操作，也可以通过redux-form对表单行为进行多种自定义操作，使得表单更灵活、易于扩展和重用性更高。
优点：
用户友好：现代化的用户界面，使得 React JS 使用更为简单，同时整合了Material UI，具有良好的可视化效果
数据效验：通过Redux-Form优秀的表单处理处理方式实现表单验证和用户交互，并且方便扩展和重用
可高度定制：可根据自己的需求和设计文档，定制出专属于自己的表单模型
Redux & React中间件层：通过中间件的形式使用 Redux-Form 逻辑处理表单状态。
如何使用@knax/redux-form-material-ui：
第一步：安装npm包
npm install --save @knax/redux-form-material-ui
第二步：导入组件
import {TextField} from '@knax/redux-form-material-ui';
第三步：创建并调用ReduxForm组件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
------ ----------- ---- -------------------------------
----- -------- - ------ -- -
----- ------ - ---
-- ------------------- -
---------------- - -----------
-
-- ------------------ -
--------------- - -----------
-
------ -------
--
--- ----------- - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
-----
------
----------------
---------------------
------------ -----
--
------
-----
------ --------------- --------------------- ----------- ----- --
------
------- ------------- -------------- ----------------
-------
--
--
----------- - -----------
----- ----------
---------
----------------
------ ------- ------------在上述代码中，我们首先创建了一个validate函数以便校验表单数据，然后我们创建了一个ContactForm组件，并且在组件的render方法中定义了两个TextField组件，分别对应了firstName和lastName两个输入框。
第四步：通过props将值绑定在页面上面
-- -------------------- ---- -------
-------- -
----- - ------------- --------- ------ ---------- - - ----------
------ -
----- ----------------------------------------------------
-----
------
-----------
---------------------
---------------
------------------------
-----------
--
------
-----
------
------------
---------------------
----------------
-------------------------
-----------
--
------
---
--- --- ---- -- ---- ------ ---- -- --- ---- --- -- -----
---
-----
-------------
--------------
--------------
-------------
---------------------
--
-------------
------------ -------
---------------
---------------
---------------------
--
------
-------
--
-在这段代码中，我们使用了redux-form提供的Field组件来包裹了该表单中的textfield，并且指定了其适用的属性（input、type、meta等等）。输入框的指定就通过组件内置的props值进行设定，因此就可以很方便地将表单和数据进行关联。
总结：
@knax/redux-form-material-ui是一个优秀的React表单处理方式，其优秀之处在于对于表单数据处理上变得更加清晰和容易控制。本文所介绍的使用过程仅仅涉及到了其最简单使用方法，对于进阶使用方法，只要我们在实际使用的过程中多思考、多尝试，一定能够获得更深入、更广泛的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e2444ba