简介
redux-form-material-ui-medici 是一个基于 React 和 Redux 的前端库，它提供了一系列可以快速构建表单的组件和工具函数。通过使用它，可以大大提高前端开发的效率和代码可维护性。
安装
在使用 redux-form-material-ui-medici 之前，你需要确保已经安装了以下依赖：
- React
- Redux
- Material-UI
- react-redux
- redux-form
然后，在终端中执行以下命令安装 redux-form-material-ui-medici：
npm install redux-form-material-ui-medici --save
使用
表单组件
redux-form-material-ui-medici 提供了一系列可以快速构建表单的组件，包括 TextField、SelectField、Checkbox、Radio 等，还提供了自定义组件的支持。
这里以构建一个登录表单为例，首先需要创建一个组件来包装表单：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
------ - ----- ----------- -------- - ---- -------------------
------ ------------ ---- ---------------------------
------ - ---------- -------- - ---- --------------------------------
----- --------- - ------- -- -
----- - ------------ - - ------
------ -
------
----------- ---------- --
----- ------------------------
----------
------
---------------
---------------------
-----------------
-----------------------
---------
------------------ --
------
---------------
---------------
---------------------
----------------
----------------------
--------- --
------
---------------
--------------------
-----------
-------------------- --
-----------
------------- ------------- -------------------------
-------
-------
--
--
------ ------- -----------
----- ----------- -- ---------
--------------以上代码中，我们使用了 redux-form 提供的 Field 组件来封装了表单输入框和复选框，并且使用了 redux-form-material-ui-medici 提供的对应的组件 TextField 和 Checkbox。
然后，在组件中使用 redux-form 的 reduxForm 函数将组件包装成可用的表单组件，并传入一个必填的 form 属性，指定表单名称。
最后，在父组件中使用我们刚刚定义的 LoginForm 组件，就能够渲染出一个完整的登录表单了：
import React from 'react';
import LoginForm from './LoginForm';
const LoginPage = () => <LoginForm onSubmit={values => console.log(values)} />;
export default LoginPage;以上代码中，我们将登录表单的提交处理函数传递给了我们的表单组件。
表单数据的处理
在我们的表单组件中，我们使用了 redux-form 提供的 handleSubmit 函数来处理表单提交。当用户点击提交按钮时，redux-form 会自动校验表单数据，并将数据传递给该函数。
而我们可以通过以下方式来获取表单数据：
const { handleSubmit } = props;
<form onSubmit={handleSubmit(values => console.log(values))}>
...
</form>以上代码中，我们将表单数据传递给了一个回调函数，并在控制台上打印出来了。
表单校验
redux-form 提供了非常方便的表单校验机制，你可以定义自己的校验规则并应用在表单组件上。
这里以校验用户名和密码输入框为例，定义一个简单的校验规则：
-- -------------------- ---- -------
----- -------- - ------ -- -
----- ------ - ---
-- ------------------ -
--------------- - ----------
-
-- ------------------ -
--------------- - ---------
-
------ -------
--以上代码中，定义了一个名为 validate 的函数，它接收一个 values 对象作为参数，该对象包含了表单数据的所有属性值。在函数中，我们定义了两个校验规则，分别是对用户名和密码输入框的不能为空校验。
定义好校验规则后，我们只需要将它应用在表单组件上：
import { reduxForm, Field } from 'redux-form';
export default reduxForm({
form: 'LoginForm', // 必填，指定表单名称
validate // 必填，指定校验函数
})(LoginForm);以上代码中，我们使用了 reduxForm 的 validate 属性来应用我们之前定义的 validate 函数。
初始化表单数据
redux-form 还支持在表单组件中初始化表单数据，你可以使用 initialValues 属性传递一个初始值对象，来自动填充表单输入框的默认值。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ----- - ---- -------------
------ - --------- - ---- --------------------------------
----- --------- - ------- -- -
----- - ------------- ------------- - - ------ -- ------- -------------
------ -
----- ------------------------
------
---------------
---------------------
-----------------
-----------------------
---------
------------------
------------------------------ -- -- -------------
--
------
---------------
---------------
---------------------
----------------
----------------------
---------
------------------------------ -- -- -------------
--
------------- ------------- -------------------------
-------
--
--
------ ------- -----------
----- ------------ -- ---------
-------------- - -- -----
--------- --------
--------- --
-
--------------以上代码中，我们使用了属性传递方式将一个初始值对象传递给了我们的表单组件，并在输入框的值属性中使用了该初始值。
处理表单的提交结果
最后，我们需要处理表单的提交结果。当表单数据提交成功后，我们需要将数据发送给服务器，或者执行一些其他的操作。
在 redux-form 中，我们可以在表单组件的 onSubmit 回调函数中处理提交结果。当表单数据提交完成后，该函数会被调用，并接受一个 values 参数，包含了已经校验通过的表单数据。我们可以在该函数中发送网络请求或者执行其他操作。
-- -------------------- ---- -------
----- --------- - ------- -- -
----- - ------------- ---------- - - ------
----- -------- - -------- -- -
------ --- ----------------- ------- -- -
------------------------ --------------- -- -
----------
---------------
----------- -- -
--------
------- -----------
---
---
---
--
------ -
----- ----------------------------------
---
-------
--
--以上代码中，我们通过 handleSubmit 函数将表单提交处理函数传递给了表单组件，当用户点击提交按钮时，该函数会被调用。
而表单提交的处理函数中，我们使用了 Promise 对象来模拟了一个网络请求，并在请求成功后弹出了一个提示框。
同时，我们还可以通过 redux-form 提供的 submitting 属性来判断是否正在提交表单。
总结
使用 redux-form-material-ui-medici，可以快速构建出高质量的表单，提高前端开发的效率和代码可维护性。在这篇文章中，我们学习了如何使用该库，包括表单组件的使用、表单数据的处理、表单校验、初始化表单数据和表单结果的处理。
如果你还没有使用 redux-form-material-ui-medici 进行表单的开发，那么快速尝试一下吧，相信你会喜欢上它的简单和便利！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556c781e8991b448d39c5