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