前言
@deli/redux-form是一个React组件，它可以协助你轻松地为你的表单提供Redux数据管理和处理。
在这篇文章中，我们将介绍如何使用@deli/redux-form来创建一个基本的登录表单。
安装
首先，我们需要将@deli/redux-form安装到我们的项目中。
npm install --save @deli/redux-form
使用
我们将创建一个简单的login表单，包括用户名和密码。在此之前，您需要确保您的Redux store已经设置。此处我们将使用redux和react-redux来创建store。
定义reducer
我们将使用redux来创建存储用户信息的reducer。我们将称之为“userReducer”。
-- -------------------- ---- -------
------ - --------------- - ---- --------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -------------
------ -
---------
--------- ------------------------
--------- -----------------------
--
--------
------ ------
-
--
------ ------- -----------------
----- -----------
--创建Redux Form表单
现在让我们来创建我们的登录表单。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------------
----- --------- - ------- -- -
----- - ------------ - - ------
------ -
----- ---------- ------------ --
-----
------ ---------------------------- --------
------
---------------
-----------------
-----------
--
------
-----
------ ---------------------------- --------
------
---------------
-----------------
---------------
--
------
------- -----------------------------
-------
--
-
--------- - -----------
----- -------
--------------
------ ------- ----------我们使用了reduxForm()函数包装我们的LoginForm函数组件，这使得我们可以使用redux store来存储form data，而且redux-form可以在我们提交表单时拦截并触发dispatch action到redux store中去。
绑定Redux Form表单
现在让我们使用React组件来绑定我们创建好的Redux Form表单。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ --------- ---- --------------
----- --- ------- --------- -
------------ - ------ -- -
------------------
-
-------- -
------ -
---- ----------------
---------- ---------- ----------------- ---
------
--
-
-
----- --------------- - ------- -- -
----- - ---- - - ------
------ -
----
--
--
------ ------- ------------------------------在这里，我们在App组件中引入了LoginForm并将它渲染出来。我们把handleSubmit方法通过props传递给loginform，等待我们的登录表单被提交。
现在我们的login form可用了。当我们提交表单时，redux-form会拦截表单提交事件并提交一个“USER_LOGIN” action到redux store中去。当然，我们还需要在reducer中定义“USER_LOGIN” action的具体操作。
总结
在本文中，我们介绍了如何使用@deli/redux-form来创建一个Redux数据管理和处理的登录表单。我们学习了如何使用redux-form的reduxForm()函数来创建表单，同时使用Field组件来渲染表单组件。
Redux-form已经在React社区获得了广泛的认可，并成为了React表单管理的最佳解决方案之一。希望这篇文章能够帮助你了解Redux-form并开始使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739e81e8991b448e9934