Question

我在页面上有N个redux-forms，每个表单都有自己的提交处理程序和验证规则。

当用户点击所有表单之外的提交按钮（使用Remote Submit）时，我会触发每个表单的提交，并希望了解我可以在何处以及如何捕获每个表单都有的事件已成功提交。如果所有表单都有效 - 我需要将用户重定向到另一个页面。

您能否就如何实现这一目标提出任何建议？

Answer 1

解决方案：

在初始商店状态中包含变量submittedForms = 0和allFormsSubmitted = false;
在每个表单提交上，发送一个将submittedForms增加1的操作，并仅在allFormsSubmitted = true时设置state.submittedForms === N。可能还会重置计数器。
让其他组件听取allFormsSubmitted。

另一个是，在每个表单提交时，直接读取商店中redux-forms生成的状态，以获得submitted=true的标记，该标记可能适用于您定义的每个表单。如果所有都设置了标志，则触发使allFormsSubmitted = true的操作。这样，您就不必管理表单的数量N（易于更改）。

编辑：侦听redux-forms操作的自定义reducer示例：

let N = 7;
let defaultState = {
    allFormsSubmitted: false,
    submittedForms: {},
}    

let customReducer = (state = defaultState, action) => {
  switch (action.type) {

    case "SUBMIT_SUCCEDED":   // the same as the redux-forms action type - just a string
      state.submittedForms[action.formName] = true;
      if (Object.keys(submittedForms).length === N) {
        state.allFormsSubmitted = true;
      }
      return {...state};

    case "SUBMIT_FAILED":
      state.submittedForms[action.formName] = false;
      state.allFormsSubmitted = false;
      return {...state};

  ...  
  }
}

Answer 2

我可以在何处以及如何捕获每个表单已提交的事件成功了，我需要将用户重定向到另一个页面。

当您同时提交所有表单时，我遇到了同样的问题，这就是我如何设法解决此问题：

将回调函数传递给action creator（createPost）

    onSubmit(values){
        this.props.createPost(values, () => {
            this.props.history.push('/');
        });

除非将帖子（表单）成功发布到后端api或数据库，否则不会重定向用户，在这种情况下，用户将以编程方式重定向到（'/'）index.html，您可以将任何路由传递给{ {1}}只要this.props.history.push(' ')存在于<Route />主（index.js）文件中

在内部动作创建者中，我使用axios向后端API发布帖子请求，一旦成功发布.then（）我传递了一个回调函数来重定向用户

<BrowserRouter> ('react-router-dom')

您可以阅读有关以编程方式导航Here

的更多信息

了解所有redux-forms已成功提交的最佳方式是什么？

2 个答案: