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

Question

这个问题与Redux Form v6.0.0有关(在写这个问题的时候它是v6.0.0-alpha.15).

我怎样才能得到表单验证身份(如pristine,submitting,invalid)从表格组件的外面？

让我举个例子.这是"经典的redux-form"伪结构:

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

... <submit-button>在JSX中的位置如下:

<button type="submit" disabled={pristine || submitting || invalid} >Save</button>

但是在我的应用程序中,我的提交按钮必须位于表单之外,放在应用程序的不同位置(假设在应用程序标题中,位于整个应用程序的顶部).

1. 我怎样才能得到这些pristine,submitting,invalid从终极版表格之外？(如果可能的话,没有真正令人讨厌的黑客:-))
2. 我该如何提交该表格？

Answer 1

只需装饰具有相同表单名称的另一个组件,您就可以访问相同的状态变量.你也可以从父传递它的onSubmit函数,并且能够从你定义它们的任何地方提交所有的Field值,因为它们都来自redux状态,而不是当前表单实例的HTML.(这是一种"hacky"方式,但感觉还是正确的)

提交函数是从父级定义的,不是在状态中共享的,因此您可以为每个实例使其不同.

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

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