表格

Question

我正在使用reduxForm。

我用

创建了组件

<form>
    <Field name="example" component="SomeCustomInputComponent" type="text"/>
</form>

我使用onChange函数将整个组件应用于reduxForm：

export default reduxForm({
    form: 'settingsAuthorization',
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true,
    enableReinitialize: true,
    onChange: (value, dispatch, props) => {
        console.warn(value);
    }
})(component);

在加上一些值后，onChane的动作没有做任何事情。

最有趣的是我尝试调试onChange函数的使用情况，我注意到： Debbug IMG

这里nextProps.values与this.props.values相同。当我更改表单上的内容时也是如此。 nextProps和this.props的值。如初始化。

但是在redux devtool网站上，我获得了有关已发送的redux-form / CHANGE操作的信息：

  

@@终极版-form.CHANGE

我可以看到表单值在全局存储（store.form.form_name.values.name）中更改：

  

表格 - ＆gt; form_name - ＆gt;值 - ＆gt;名称：'old Name'=＆gt; '新名字'

当我把：

onChange: (value, dispatch, props) => {
        console.warn(value);
    }

我在我的网站上的其他表格的属性一切顺利。

我如何通过使用react-redux来修复我的第一个对变更事件的反应？

Answer 1

您需要将表单reducer添加到redux reducer中，以便在redux存储中存储和更新表单状态。 有关如何执行此操作的文档here

如果您没有将redux用于其他任何事情，则需要createStore，并将您的应用包装在react-redux Provider中，更多内容包含here