Javascript 从外部提交按钮Redux Form v6.0.0

这个问题涉及到（在撰写这个问题时，它是v6.0.0-alpha.15）

如何从表单组件外部获取表单验证状态（如

原始

，

提交

，

无效

）

让我举个例子。这是“经典的重复形式”伪结构：

<Form(MyExampleForm)>
    <MyExampleForm>
        <input name="title" ... />
        <submit-button />

…其中JSX中的

如下所示：

import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';

const RowDetailForm = reduxForm({form: 'row-detail-form'})(RowDetail);

export default connect(mapStateToProps, null, null, {withRef: true})(RowDetailForm);

保存

但在我的应用程序中，我的提交按钮必须位于表单之外，位于应用程序的不同位置（比如在应用程序标题中，位于整个应用程序的顶部）

我如何从Redux表单外部获取那些

原始的
，
提交的
，
无效的
？（如果可能的话，没有真正讨厌的黑客攻击：-）

我如何提交表格

redux表单与React-redux配合使用，以使React中的html表单能够使用redux存储其所有状态

若“在Redux表单之外”意味着仍然是Redux应用程序，那个么您可以通过调度一些操作来尝试将这些属性存储在状态中

在表单中：您正在检测正在发生的事情（当其无效时等），发送一个操作以修改状态，

---

在“外部”部分：您正在将适当的属性传递给组件（以及您需要的属性），这取决于您是否禁用了一个按钮。

也许您可以查看一下

redux表单的功能。它提供对修饰表单组件实例的
submit（）
方法的访问。还有一个
原始
布尔属性和一个
无效
布尔属性可用（还有一个用于公开提交属性的属性）

这里有一个示例：（示例适用于5.3.1，但过程与使用实例API的v6相似）

其基本思想是，通过向表单中添加
ref=“myExampleForm”
，可以使用
this.refs.myExampleForm
传递它。然后，您可以检查实例的属性或调用
submit（）
方法（或任何其他公开的方法）。
如果我们说的只是提交表单，那么您应该为redux connect（）函数提供{withRef:true}

考虑具有子RowDetail组件的行组件，该子组件具有应从行保存的信息

本例中的RowDetail可以如下创建：

import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';

const RowDetailForm = reduxForm({form: 'row-detail-form'})(RowDetail);

export default connect(mapStateToProps, null, null, {withRef: true})(RowDetailForm);

然后，在父组件（行）中，使用ref属性创建表单：

<RowDetailForm ref={'rowDetailForm'} .../>  

如果我们讨论的是原始属性和其他表单属性，那么您可以尝试从父组件中的mapStateToProps函数获取它们

const rowDetailFormName = 'row-detail-form';
const mapStateToProps = (state) => ({
  rowDetailForm: state.form[rowDetailFormName]
});

但这种方式似乎有点不妥，因为据我所知，redux表单API从未打算直接访问所有表单状态。如果我在最新的redux表单版本6.0.2中出错，请更正：

可以通过选择器访问表单状态
原始
，
提交
，
无效

可以导出redux表单动作创建者

只要用相同的表单名称装饰另一个组件，您就可以在那里访问相同的状态变量。您还可以将其从父级传递到submit函数，并能够从您定义的任何位置提交所有字段值，因为它们都来自redux状态，而不是当前表单实例的HTML。（这是一种“黑”的方式，但感觉不错）

submit函数是从父级定义的，不是在状态中共享的，因此每个实例的submit函数都不同

class MySubmitForm extends React.Component {
    render() {
        return (
            <button
                onClick={this.props.handleSubmit}
            >
                {this.props.pristine ? 'pristine' : 'changed'}
            </button>
        )
    }
}

export default reduxForm({
    form: 'myFormName'
})(MySubmitForm);

类MySubmitForm扩展了React.Component{
render（）{
返回(
{this.props.pristine？'pristine'：'changed'}
)
}
}
导出默认reduxForm({
表格：“myFormName”
})（MySubmitForm）；
现在更容易做到这一点。您可以在具有按钮的独立组件中调用Submit操作

请参见此示例：
我最近不得不解决这个问题。最后，我向表单传递了一个回调，每当我感兴趣的属性发生变化时，就会调用该回调。
我使用
componentdiddupdate
生命周期方法来检测更改

这应该适用于任何版本的库

这是一篇带有示例代码的帖子-
我不知道redux表单，但是，提交一个在表单外面有一个按钮的表单听起来已经很骇人听闻了。。。为什么会有这样的要求？@jordi castilla>请不要在作业中寻找问题，而是尝试找到解决方案。你的问题的答案已经有问题了。（由于用户界面，“保存按钮”在整个应用程序中处于中心位置，并放置在应用程序标题中-在应用程序的最顶端。）@Soson是否可以通过选择器使用
提交
？还是我看错地方了？虽然不正确，但与此相关的有用信息context@oldo.nicho我认为在当前版本中，您应该能够轻松地使用全局动作创建者来控制它。当我写答案时，它没有及时提供。很好-你说得对。我对这个图书馆了解得越多，我对它的印象就越深刻！我不确定这是否有效。单击处理程序返回一个合成的单击事件。如果您使用的是7.x.x，我推荐@FerA320的答案