简介
redux-form是一个高阶组件，旨在简化管理表单状态和验证。此外，提供多种表单控件封装和自定义表单控件支持，使得表单开发变得更加简单。
安装
在终端中输入以下命令安装redux-form：
npm install --save redux-form
使用
引入redux-form并使用reduxForm高阶组件包装表单组件，即可将表单组件转换为可管理状态的组件。reduxForm接受一个配置对象，它包含一些必填属性，如表单名称、提交函数等。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
----- --------- - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
-----
------ -------------------------------
------ --------------- ----------------- ----------- --
------
-----
------ ---------------------------
------ ------------ ----------------- ------------ --
------
-----
------ ------------------------------
------ --------------- ----------------- --------------- --
------
------- -------------------------
-------
--
--
------ ------- -----------
----- ------------ -- -------
--------- ------ -- -------------------- -- -------
--------------模块化后的表单组件可以像普通组件一样使用，reduxForm实现了表单值及验证状态的管理，props上会添加handleSubmit函数并传入表单数据对象。
-- -------------------- ---- -------
----- --------- ------- --------------- -
---------------- - ------ -- -
--------------------
--
-------- -
------ -
-----
-----------
---------- -------------------------------- --
------
--
-
-表单控件
redux-form提供了一些常见的表单控件封装，包括input、textarea、select等。Field组件提供了丰富的props属性支持，可实现多种自定义表单控件。
input
<Field name="username" component="input" type="text" />
textarea
<Field name="message" component="textarea" rows="5" />
select
<Field name="color" component="select"> <option value="">选择颜色</option> <option value="red">红色</option> <option value="green">绿色</option> <option value="yellow">黄色</option> </Field>
checkbox
<Field name="agree" component="input" type="checkbox" />
radio
<Field name="gender" component="input" type="radio" value="male" /> 男 <Field name="gender" component="input" type="radio" value="female" /> 女
自定义表单控件
如果需要自定义表单控件，只需要传递一个渲染函数component即可。这个渲染函数可以接收input相关属性，如value、onChange等，还能接收自定义的属性。
-- -------------------- ---- -------
----- ------- - -- ------ ----- ------- -- -- -
------ -
-----
---------------------------
------ ---------- --------- --
------------- -- ---------- -- ------------------------
------
--
--
------ -------------- ------------------- --------- ------ - --验证
表单的验证工作由redux-form内置的验证器完成，同时支持自定义验证。在配置对象中添加validate函数即可实现自定义验证。validate接收表单数据对象并返回验证结果对象，键为表单名称，值为错误消息。
-- -------------------- ---- -------
----- -------- - ------ -- -
----- ------ - ---
-- ------------------ -
--------------- - ---------
- ---- -- ----------------------- - -- -
--------------- - ---------- ---
-
-- ------------------ -
--------------- - --------
-
-- --------------- -
------------ - --------
- ---- -- -------------------------------------------- -
------------ - ----------
-
------ -------
--
------ ------- -----------
----- ------------
--------- -- --------
--------------结语
redux-form提供了许多方便的工具和API，使得表单开发变得更加简单。希望本文能为初学者提供一些指导和帮助。
示例代码
完整示例代码可在下面的链接中找到：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d02