前言：
本文主要介绍了如何通过使用npm包redux-forms-inferno来创建表单。
在前端的开发中，表单是一个必不可少的组成部分，用于收集用户输入信息并将其传递给后端处理。虽然在 React 中有一个自带的表单组件，但它还是有很多局限性，所以我们需要转向第三方库来帮助我们实现更灵活和强大的表单。
其中redux-forms-inferno是一个非常优秀的表单处理库，使用它可以帮助我们快速地创建表单，并提供了很多实用的功能，例如表单验证、表单数据序列化等等。本文将简单介绍如何使用redux-forms-inferno来创建表单。
安装
安装redux-forms-inferno很简单，只需要执行如下命令即可：
npm install --save redux-forms-inferno
使用
在实践中，我们需要遵循以下步骤来创建表单。
第一步：创建表单组件
首先，我们需要创建一个表单组件，它将使用redux-forms-inferno来处理表单数据。这个组件需要继承Inferno.Component类。
示例代码：
-- -------------------- ---- -------
------ ------- ---- ----------
------ - ----- ------- - ---- ----------------------
----- ------ ------- ----------------- -
-------- -
------ -
----- -----------------------------------
-------- ----------- ------------ ------------- --
-------- ----------- -------------- --------------- --
------- -----------------------------
-------
--
-
-
------ ------- -------在示例代码中，我们定义了一个表单组件MyForm，它包含两个输入框和一个提交按钮。我们使用Control组件来表示输入框，传入了属性type、name和label。
第二步：将表单组件连接到 Redux store
我们需要使用connect函数将表单组件连接到 Redux store。在这之前，我们需要先定义 Redux store。
示例代码：
import { createStore } from 'redux';
import { reducer as formReducer } from 'redux-forms-inferno';
const store = createStore(
formReducer
);我们先使用createStore函数创建一个 Redux store，同时引入redux-forms-inferno中的reducer函数作为store的reducer。
然后我们需要使用connect函数将表单组件连接到store上。
示例代码：
import { connect } from 'inferno-redux';
import MyForm from './MyForm';
const ConnectedForm = connect()(MyForm);
export default ConnectedForm;我们使用connect()函数将组件与Redux store连接起来，该函数返回一个新的组件，这个新组件就是包装后的MyForm组件。这个新组件可以访问Redux store中的state和dispatch，从而对表单进行操作。
表单验证
使用redux-forms-inferno，我们可以方便地进行表单验证。
在Control组件中，我们可以通过设置validators属性，来指定验证规则。
示例代码：
-- -------------------- ---- -------
------ ------- ---- ----------
------ - ----- ------- - ---- ----------------------
----- ------ ------- ----------------- -
-------- -
------ -
----- -----------------------------------
-------- ----------- ------------ ------------- ----------------------- --
-------- ----------- -------------- --------------- ---------------------- ---------------- --
------- -----------------------------
-------
--
-
-
-------- --------------- -
-- -------- -
------ ----- ----- -- ----------
-
-
-------- -------------- -
------ --------------- -
-- ------------- - ---- -
------ ----- ----- ----- -- ------ ---- ------ ------------
-
-
-
------ ------- -------在这个示例中，我们定义了两个验证函数，一个是required，用于验证输入是否为空，另一个是maxLength，用于验证输入的最大长度是否超出限制。
我们把这两个函数作为Control组件的validators属性传入，即可实现表单验证。
表单提交
最后，我们需要监听表单的提交事件，并在提交时获取表单的数据并进行处理。
示例代码：
-- -------------------- ---- -------
------ ------- ---- ----------
------ - ----- ------- - ---- ----------------------
----- ------ ------- ----------------- -
-------- -
------ -
----- -------------------------------------------------------------
-------- ----------- ------------ ------------- ----------------------- --
-------- ----------- -------------- --------------- ---------------------- ---------------- --
------- -----------------------------
-------
--
-
-------------- -
-- ------
------------------
-
-
-------- --------------- -
-- -------- -
------ ----- ----- -- ----------
-
-
-------- -------------- -
------ --------------- -
-- ------------- - ---- -
------ ----- ----- ----- -- ------ ---- ------ ------------
-
-
-
------ ------- -------在这个示例中，我们在Form组件上设置了一个onSubmit属性，它将在表单提交时被调用。我们传入了一个onSubmit回调函数，它会接收表单提交的数据，处理完数据后进行其他操作。
总结
通过使用redux-forms-inferno，我们可以快速地创建复杂的表单并进行各种操作，包括表单验证、表单数据序列化等等。在实践中，我们需要遵循以上步骤来创建和使用表单。
如果你正在开发一个 React 应用，不妨试试redux-forms-inferno。你会发现它能大大提高你的开发效率和代码质量。
完整示例：
-- -------------------- ---- -------
------ ------- ---- ----------
------ - ----------- - ---- --------
------ - -------- - ---- ----------------
------ - ------- -- ----------- - ---- ----------------------
------ ------ ---- -----------
----- ----- - ------------
-----------
--
----- --- ------- ----------------- -
-------- -
------ -
--------- --------------
------- --
-----------
--
-
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005516d81e8991b448ceac4