在使用 React 进行前端开发时，表单是一个必不可少的组件。而 Redux 提供的状态管理能力，也极大地方便了表单的数据管理。而 redux-form-react-submitbutton 则为表单开发提供了更加便捷的提交按钮组件。
安装
使用 npm 进行安装：
--- ------- -----------------------------
或者使用 yarn 进行安装：
---- --- -----------------------------
使用
使用 redux-form-react-submitbutton，需要将其作为表单组件的子组件，并传入表单的 handleSubmit 属性：
------ ----- ---- -------
------ - --------- - ---- ------------
------ - ------------ - ---- -------------------------------
----- ------ - -- ------------ -- -- -
----- ------------------------
--- --- ---
-------------------------------
-------
-
-- --------- ---
----- ----------- - -----------
----- --------
----------
------ ------- -----------通过将 SubmitButton 作为表单组件的子组件，可以轻松地实现提交按钮的样式，并利用 handleSubmit 属性实现表单的提交。
配置
redux-form-react-submitbutton 可以通过传入 props 实现不同的配置。以下是一些常用的配置项：
type
决定了按钮的类型，可以设置为 submit 或 button。默认值为 submit。
------------- -------------------------------
disabled
决定了按钮是否为禁用状态，可以通过布尔值进行设置。默认值为 false。
------------- ---------------------------------
className
决定了按钮的 CSS 类名，可以进行自定义样式。
------------- -------------- ------------------------------
otherProps
可以通过该属性传入其他的 props，并影响按钮的表现。
------------- ----------------------------------
示例代码
以下是一个完整的示例代码，演示了如何使用 redux-form-react-submitbutton 实现表单的数据提交：
------ ----- ---- -------
------ - ------ --------- - ---- ------------
------ - ------------ - ---- -------------------------------
----- ------ - -- ------------ -- -- -
----- ------------------------
-----
------ --------------------------
------ ----------- ----------------- ----------- --
------
-----
------ ---------------------------
------ ------------ ----------------- ------------ --
------
-------------------------------
-------
-
----- ----------- - -----------
----- --------
----------
------ ------- -----------在这个示例代码中，我们使用了 Field 组件进行表单的构建，并使用了 redux-form-react-submitbutton 进行提交按钮的样式与提交操作的处理。通过以上步骤，即可轻松地实现前端表单的开发与状态管理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005728781e8991b448e8bec