简介
@watchmen/redux-form-material-ui 是一个用于 React 前端开发的 npm 包，它为 Redux Form 添加了与 Material-UI 风格的表单组件。
安装
@watchmen/redux-form-material-ui 可以通过 npm 安装：
npm install @watchmen/redux-form-material-ui
使用
首先需要导入一些必要的组件：
import React from 'react';
import {reduxForm, Field} from 'redux-form';
import {TextField, RaisedButton} from '@watchmen/redux-form-material-ui';接下来，定义一个简单的表单组件：
-- -------------------- ---- -------
----- ---------- - ----- -- -
----- -------------- --------- ------ ----------- - ------
------ -
----- ------------------------
-----
------
----------------
---------------------
------------ -----
---------
--
------
-----
------
---------------
---------------------
----------- -----
---------
--
------
---- ------------------ ---------
-------------
-------------
--------------
-------
---------------------
--
-------------
-------------
------------ -------
---------
------------------ -- -----------
---------------
------------------- --------
--
------
-------
--
--我们使用了 <Field> 组件，其中的 component 属性使用了 @watchmen/redux-form-material-ui 的 <TextField> 组件。这个组件本质上和 Material-UI 的 <TextField> 组件非常类似，但它能够从 Redux Form 中获取到表单的状态。
最后，需要使用 reduxForm() 函数把表单组件包装起来，生成一个新的高阶组件：
export default reduxForm({
form: 'simple', // a unique identifier for this form
})(SimpleForm);form 属性的值是这个表单的唯一标识符。它通常与整个应用的 state 结构是分开的，以避免冲突。因此，可以在 Redux Store 中使用一个名为 form 的单独的键来存储这个表单的状态。
示例代码
为了更好的理解 @watchmen/redux-form-material-ui 的使用，以下是一个完整的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ------ ---- -------------
------ ----------- ------------- ---- -----------------------------------
----- ---------- - ----- -- -
----- -------------- --------- ------ ----------- - ------
------ -
----- ------------------------
-----
------
----------------
---------------------
------------ -----
---------
--
------
-----
------
---------------
---------------------
----------- -----
---------
--
------
---- ------------------ ---------
-------------
-------------
--------------
-------
---------------------
--
-------------
-------------
------------ -------
---------
------------------ -- -----------
---------------
------------------- --------
--
------
-------
--
--
----- --------------- - -----------
----- --------- -- - ------ ---------- --- ---- ----
---------------
------ ------- -------- ----- -
----- ------------ - -------- -- -
----------------------
--
------ ---------------- ----------------------- ---
-在这个示例中，我们创建了一个简单的表单组件 SimpleForm，它包含两个输入框和两个按钮。我们使用 reduxForm() 函数将 SimpleForm 转换成一个新的高阶组件 SimpleReduxForm。SimpleReduxForm 是一个能够从 Redux Store 中获取表单状态的 React 组件。
最终，我们在 App 组件中使用 SimpleReduxForm 组件，并把 handleSubmit 函数传递给 onSubmit 属性。这个函数会在用户填写完表单并单击提交按钮时调用，并且它会接收表单数据作为参数。在这个示例中，我们只是将表单数据输出到控制台。
使用 @watchmen/redux-form-material-ui，我们可以简洁、优雅地定义 React 组件，并且很容易地使用 Redux Form 进行表单处理。它大大提高了开发效率，并使我们的代码更加简洁易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562da81e8991b448e03cc