Redux-Form 是一个基于 React 和 Redux 的表单处理库，它可以简化表单的编写和处理，并且提供了很多有用的功能。在本教程中，我们将了解 Redux-Form 的基本用法，包括表单的创建、输入验证、提交等。
安装
首先需要安装 Redux-Form，命令如下：
npm install redux-form --save
创建表单
Redux-Form 的表单组件是一个高阶组件，我们需要使用 reduxForm 函数对我们的表单组件进行包装。在表单组件的 render 方法中，可以使用 Field 组件来定义表单的不同字段，如下所示：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ --------- - ---- ------------- ----- ------ ------- --------------- - -------- - ----- - ------------ - - ----------- ------ - ----- ------------------------ ----- ------ ------------------------- ------------ ------ ---------------- ----------------- ----------- -- ------ ----- ------ ----------------------- ------------ ------ --------------- ----------------- ----------- -- ------ ------- ----------------------------- ------- -- - - ------ - ----------- ----- -------- ----------- ------ ------- -------展开代码
在上面的示例中，我们使用了 Field 组件来创建表单字段，name 属性用于指定字段名称，component 属性用于指定输入组件的类型，在本例中为 input，type 属性用于指定输入组件的类型，如 text、number 等。
我们还需要使用 reduxForm 函数对我们的表单组件进行包装，以创建高阶组件。
输入验证
Redux-Form 还提供了输入验证的功能，我们可以对每个表单字段进行输入验证。在 Field 组件的 validate 函数中，可以对输入进行验证，并返回一个对象，这个对象的属性名就可以与表单字段名称对应。如果验证结果为 undefined，则说明验证通过，否则说明验证失败，且失败的信息就是这个属性的值。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ --------- - ---- ------------- ----- -------- - ------ -- - ----- ------ - --- -- ------------------- - ---------------- - ----------- - -- ------------------ - --------------- - ----------- - ------ ------- -- ----- ------ ------- --------------- - -------- - ----- - ------------ - - ----------- ------ - ----- ------------------------ ----- ------ ------------------------- ------------ ------ ---------------- ----------------- ----------- -- ------------------------ -- --------------------- -- - ---------------------------------- -- ------ ----- ------ ----------------------- ------------ ------ --------------- ----------------- ----------- -- ------------------------ -- --------------------- -- - ---------------------------------- -- ------ ------- ----------------------------- ------- -- - - ------ - ----------- ----- --------- -------- ----------- ------ ------- -------展开代码
在上面的示例中，我们定义了一个 validate 函数来进行输入验证。在 MyForm 组件中，我们通过检查 this.props.meta.error 来确定字段是否验证失败，并在下方显示错误消息。
提交表单
当表单输入验证通过后，我们就可以提交表单了。我们可以设置表单组件的 onSubmit 方法，以处理表单提交事件。在 onSubmit 方法中，我们可以取得表单的值，并将其发送到服务器。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ --------- - ---- ------------- ----- -------- - ------ -- - ----- ------ - --- -- ------------------- - ---------------- - ----------- - -- ------------------ - --------------- - ----------- - ------ ------- -- ----- ---------- - ------ -- - -------------------- -- ----- ------ ------- --------------- - -------- - ----- - ------------ - - ----------- ------ - ----- ------------------------------------ ----- ------ ------------------------- ------------ ------ ---------------- ----------------- ----------- -- ------------------------ -- --------------------- -- - ---------------------------------- -- ------ ----- ------ ----------------------- ------------ ------ --------------- ----------------- ----------- -- ------------------------ -- --------------------- -- - ---------------------------------- -- ------ ------- ----------------------------- ------- -- - - ------ - ----------- ----- --------- -------- ----------- ------ ------- -------展开代码
在上面的示例中，我们定义了一个 submitForm 函数来进行表单提交。在 MyForm 组件中，我们将 handleSubmit(submitForm) 作为 onSubmit 方法，这样当用户提交表单时，将调用 submitForm 函数，打印表单的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca55b6e46428fe9e25bc50
