简介
@gfpacheco/redux-form-material-ui 是一个针对 React 的表单解决方案，它利用 Material UI 来美化表单，并使用 Redux Form 技术进行状态管理。这个包可以大大简化表单的构建过程，让开发者可以更加专注于业务逻辑的处理。
安装
你可以通过 npm 来安装包：
npm install @gfpacheco/redux-form-material-ui --save
使用
首先，我们需要准备好的环境，包括 React、Material UI 和 Redux Form。如果还没有安装，请先安装：
npm install react --save npm install react-dom --save npm install material-ui --save npm install react-tap-event-plugin --save npm install redux-form --save
接下来，我们可以在项目中导入 @gfpacheco/redux-form-material-ui 包：
import React from 'react';
import { Field } from 'redux-form';
import { renderTextField } from '@gfpacheco/redux-form-material-ui';注意到我们使用了 renderTextField 函数，这个函数是用来渲染文本输入框的。
接下来，我们定义一个 Redux Form 的表单组件：
-- -------------------- ---- -------
----- ------ - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
------
---------------
---------------------------
----------------
--
------
---------------
---------------------------
----------------
---------------
--
------- -----------------------------
-------
--
--注意到我们要使用 renderTextField 来渲染输入框，同时我们也需要在 Field 组件上添加 name 和 label 属性。如果希望输入框是密码模式，则可以通过 type 属性指定。
最后，我们需要将这个表单组件与 Redux 连接起来：
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
const MyFormRedux = reduxForm({
form: 'myForm'
})(MyForm);
export default connect()(MyFormRedux);注意到我们要使用 reduxForm 函数来封装表单组件，将其连接到 Redux。在该函数的参数中，form 属性用来指定表单名称。
现在，我们就可以在其他组件中使用该表单组件了：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
----- ---------- ------- --------------- -
------------ - ------ -- -
--------------------
--
-------- -
------ -
-----
------ ---------
------- ---------------------------- --
------
--
-
-
------ ------- -----------在上述示例代码中，我们定义了一个页面组件 MyFormPage，其中包含了一个 MyForm 表单组件。我们通过添加 onSubmit 属性，来指定表单提交的函数。
总结
通过使用 @gfpacheco/redux-form-material-ui 包，我们可以轻松地构建 Material UI 风格的 React 表单，同时还可以通过 Redux Form 来方便地进行状态管理。这个包可以大大提高我们的开发效率，让我们可以更加专注于业务逻辑的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562eb81e8991b448e09b6