在前端开发中，表单是非常常见的元素，而表单中输入的内容多样性也非常大，比如文本、数字、图片、富文本等。在 React 项目中使用 redux-form 库可以方便地创建表单，而配合 draft-js 库可以实现富文本编辑器。但使用 redux-form 和 draft-js 来创建富文本表单时，需要写大量的 action 和 reducer，而且还不够灵活。在这个时候，可以使用 redux-form-actions-draftjs 这个 npm 包，它可以大大简化代码量，并提供更好的可维护性和灵活性。
安装
可以通过 npm 安装这个包：
--- ------- --------------------------
或者使用 yarn：
---- --- --------------------------
使用
创建 action 和 reducer
首先需要创建一个 action 和 reducer。在 redux-form 中，每个表单都需要一个唯一的表单名字，所以在这里也需要指定一个表单名字。另外，这里使用了 draft-js 的 ContentState，所以可以在表单中使用富文本编辑器。
-- ----------
------ - ------------ - ---- ---------------
------ ----- ---------------- - ------------------
------ ----- -------------- - -------------
-----------------
---------- ------ ------------ -- -- ----- --------- ------ ----------- --
-
-- ----------
------ - ------------- - ---- ---------------
------ - ---------------- - ---- -----------
----- ------------ - --
------ ------- ---------------
------------------- ------- - ------- -- -- --
---------
--------------- -
-----------------------
---------------- -------------------
-
--
-- -------------将表单连接到 store
将表单连接到 store 时，需要引入 reducer，并将其加入 combineReducers 中。同时，也需要将 redux-form 的 reducer 和 redux-form-actions-draftjs 的 reducer 一起加入 combineReducers 中。
-- -------- ------ - ------------ ---------------- --------------- - ---- ------- ------ - ------- -- ----------- - ---- ------------ ------ ------------------ ---- ----------- ----- ----------- - ----------------- ----- ------------ ------------ ------------------ -- ------ ------- ------------------------ --------------------------------
创建表单
在一个 React 组件中创建表单，需要引入 Field 和 redux-form-actions-draftjs 中的 DraftEditor。 Field 负责连接某个组件或输入框到表单，而 DraftEditor 就是使用富文本编辑器的输入框。
-- ---------
------ ----- ---- -------
------ - ----- - ---- ------------
------ - ----------- - ---- ----------------------------
----- ------ - -- ------------ -- -- -
----- ------------------------
-----
-----------------
------ ------------ ----------------- ----------- --
------
-----
-----------------
------ -------------- ----------------------- --
------
------- -------------------------
-------
-
------ ------- ------注意，在每个 Field 中指定了 name，这个名字可以随便取，但要保证唯一。
与组件的联动
在 React 组件中，我们一般会将表单元素的值和组件的 state 绑定在一起，这样用户的输入就可以实时更新组件的状态。使用 redux-form-actions-draftjs 也可以这样做。在组件中可以通过 input 属性获取到表单中输入框的值，也可以通过 meta 属性获取到输入框的状态。在下面的例子中，实时记录输入框中的字数，并且如果字数超过一定数量则停止输入。
-- --------------
------ ------ - --------- --------- - ---- -------
------ - ----------- - ---- ----------
------ - ------- - ---- -------------
------ - -------------- - ---- -----------
----- ----------- - -- ------ ----- --------------- --------- ----- -- -- -
----- - ------ -------- - - -----
----- ------------- -------------------- - -----------------------------------
----- -------------- ---------------- - ---------------
------------ -- -
------------------------ ------ ------------
-- --------------
------------ -- -
-- ------ -- ----------------------------------------------- -
---------------------------------------------------------
-
--
----- ------------------ - ---------------- -- -
----- ---------- - --------------------------------------------------------
-- ----------- -- -------------- -
----------------------
--------------------------------------------
-----------------------------------
- ---- -- --------------- -
---------------------
-
-
----- ------------- - --
------ -
-----
------- ------------------------- ----------------------------- --
------------- -- ---- -------- ------ ----- ----------------
------------------------------------------------------------ - ---------------------
------
-
-
----- ------------------ - -
--------------
-
------ ------- ------------- --------------------------------在 DraftEditor 组件中，通过 useEffect 监听 redux-form 中存储的值并更新本地的 editorState。当用户在输入框中输入内容时，并不是实时更新 redux-form 中存储的值，而是等用户完成了输入操作（即退出输入框）时才更新 redux-form 中存储的值。上面的 handleEditorChange 函数中，通过调用 onChange 函数 实现更新 redux-form 的操作。当字数超过限制时，DraftEditor 组件会显示错误提示。这样就实现了输入框中输入内容和组件状态的联动。
总结
通过使用 redux-form-actions-draftjs，可以大幅度减少表单代码的编写量，并且方便同时使用 redux-form 和 draft-js 实现富文本输入框。同时还可以将表单元素的值与组件状态相连接，带来更好的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005677281e8991b448e3dd1