前言
在前端开发中，使用组件库和工具库可以大大提高我们的开发效率和代码质量。其中，redux-variable-number-fields 是一个非常优秀的 npm 包，可以轻松地实现增加或删除变量数量的表单。这篇文章就针对大家如何使用 redux-variable-number-fields 插件进行详细的讲解。
安装
首先，我们需要安装 redux 的相关依赖。
npm install redux react-redux redux-thunk --save
接下来，我们需要安装 redux-variable-number-fields。
npm install redux-variable-number-fields --save
使用方法
使用 redux-variable-number-fields 相当简单。我们只需要在我们的 React 组件中引用相关的组件和方法，就可以快速地实现表单的增加和删除功能了。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ----- ------ - ---- -------
------ - --------- ----------- - ---- -------------------------------
----- ------ ------- --------- -
------------------ -
-------------
-
-------- -
----- - ----------------- - - ----------------
----- - ------ - - -----------
------ -
------
-
------------------ ------ -- -
----- ---- - -------------------
----------------------- - ------------- ----------- ---
------ -
---------- ------------------- -----------
------ ----------- ------------------------------
------- ----------- -- ------------------------------------------
------------
--
--
-
------- ----------- -- --------------------- ------ ----- ------ -- -----------------
-------
--
-
-
----- --------------- - ----- -- -
-------------------
------ -
------- ------------
--
--
----- ------------------ - -------- -- -
------ -
--------------- -
--------------------------
--
------------------ -
-----------------------------
-
--
--
------ - --------
----------------
------------------
-------------------------
------ ------- -------在我们的这个表单组件中，我们使用 getFieldDecorator 来渲染输入框的样式，使用 Button 来添加或删除表单中的字段。我们还需要对表单组件进行一些配置，如当前表单组件的初始值，我们通过 getFieldDecorator 方法来配置。
效果演示
我们现在来实现一下一个具体的示例，来展示 redux-variable-number-fields 的使用效果。
-- -------------------- ---- -------
-- -----------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ----- ------ - ---- -------
------ - --------- ----------- - ---- -------------------------------
----- -------- ------- --------- -
------------------ -
-------------
-
-------- -
----- - ----------------- - - ----------------
----- - ------ - - -----------
------ -
------
-
------------------ ------ -- -
----- ---- - -------------------
----------------------- - ------------- ----------- ---
------ -
---------- ------------------- -----------
------ ----------- ------------------------------
------- ----------- -- ------------------------------------------
------------
--
--
-
------- ----------- -- --------------------- ------ ------- ------ -- -------------------
-------
--
-
-
----- --------------- - ----- -- -
-------------------
------ -
------- ------------
--
--
----- ------------------ - -------- -- -
------ -
--------------- -
--------------------------
--
------------------ -
-----------------------------
-
--
--
-------- - --------
----------------
------------------
---------------------------
------ ------- ---------
-- -----------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ----- - ---- -------
----- -------- ------- --------- -
------------------ -
-------------
-
-------- -
----- - ----- - - -----------
----- ---------- - -------------- -- -
------ -
---- ---------
-------- ---------------
--------- --------------
--
---
----- ------- - --
------ -------
---------- ----------
---- ---------
-- -
------ -------
---------- -----------
---- ----------
---
------ -
------ ----------------------- ----------------- --
--
-
-
----- --------------- - ----- -- -
-------------------
------ -
------ -----------
--
--
-------- - --------
---------------
------------
------ ------- ---------
-- ------
------ ------ - --------- - ---- --------
------ -------- ---- -------------
------ -------- ---- -------------
------ - ------------ ---------------- --------------- - ---- --------
------ - -------- - ---- --------------
------ ----- ---- --------------
------ - --------------------------- - ---- -------------------------------
----- -------- - -----------------
------- ----------------------------
------ ------ - --- ------- -- -
------------------- -
---- -----------
------ ---------- - ------- -------------- ---- ------------- ---
--------
------ ------
-
-
---
----- ----- - --------------------- ------------------------
----- --- ------- --------- -
------------------ -
-------------
-
-------- -
------ -
--------- --------------
-----------
-----------
-----------
--
-
-
------ ------- ----我们在 App 组件中引用了 TodoForm 和 TodoList，分别展示了表单的增加和删除功能和表单数据的展示功能。通过以上代码的实现，我们可以轻松地实现表单数据的控制和展示。
总结
redux-variable-number-fields 是一个非常优秀的 npm 包，可以轻松地实现增加或删除变量数量的表单。在实际的项目开发中，使用 redux-variable-number-fields 可以大大提高我们的开发效率和代码质量，同时也可以让我们更好地把控表单数据的控制和展示。希望本文对大家有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005540181e8991b448d15a2