在前端开发中，表单是非常重要的一部分。然而，表单的编写代码通常会很冗长和繁琐。为了简化这个过程，许多前端库和框架都提供了支持表单处理的工具。
其中一个非常流行的工具是redux-form-material-ui。这个npm包提供了一种使用React，Redux和Material-UI构建表单的方法，大大简化了表单处理的复杂性。
安装
首先，你需要在你的项目中安装redux-form-material-ui。可以使用以下命令：
--- ------- ----------------------
基础用法
redux-form-material-ui支持各种不同类型的表单元素，包括文本输入，选择框和日期选择器等等。下面是一个简单的例子，展示如何使用redux-form-material-ui创建一个带有两个文本输入框和一个提交按钮的表单。
------ ----- ---- --------
------ - ------ --------- - ---- -------------
------ - --------- - ---- -------------------------
------ ------ ---- ---------------------------
----- ------ - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
-----
------ ---------------- --------------------- ------------ ----- --
------
-----
------ --------------- --------------------- ----------- ----- --
------
-----
------- ------------------- --------------- --------------
------
---------
------
-------
--
--
------ ------- -----------
----- --------
-----------这个例子中，我们使用了redux-form和redux-form-material-ui提供的Field和TextField组件。Field组件是Redux Form提供的用于渲染表单元素的组件，而TextField组件则是redux-form-material-ui提供的一个Material-UI风格的文本输入框。
我们将两个TextField组件包装在Field组件中，并为每个TextField指定一个名字。最后，我们将这个表单包装在reduxForm函数中，以便Redux Form能够管理它的状态。
当表单被提交时，我们可以使用handleSubmit回调函数执行一些操作。在这个例子中，我们只是打印出表单数据：
----- -------- - ------ -- - -------------------- --
要将这个回调函数传递给我们的表单，我们只需要在导出时将其作为属性传递给MyForm组件即可：
------ ------- ----------- ----- --------- -------- -----------
深入使用
除了基础用法外，redux-form-material-ui还支持很多高级功能，例如表单验证和异步提交等等。下面是一些示例代码，展示了如何使用这些功能。
表单验证
在大多数情况下，你会希望对表单进行一些验证，以确保用户输入的数据符合要求。Redux Form提供了一个非常方便的方法来进行表单验证，只需要为Field组件指定一个validate函数即可。
----- -------- - ------ -- -
----- ------ - ---
-- ------------------- -
---------------- - -----------
-
-- ------------------ -
--------------- - -----------
-
------ -------
--
------ ------- -----------
----- ---------
---------
--------
-----------在这个例子中，我们定义了一个validate函数，它会接受表单数据对象作为参数。如果某个字段没有填写，则将该字段添加到一个错误对象中，并在最后返回该错误对象。Redux Form会在每次表单提交时调用此函数，并将其结果用于确定表单是否有效。
异步提交
在某些情况下，你可能需要在表单提交时执行
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/36018