我在页面上有Nredux-forms，每个表单都有自己的带有验证规则的提交处理程序。
当用户单击所有表单之外的“提交”按钮（使用Remote Submit）时，我会触发每个表单的提交，并想了解在哪里以及如何捕获每个表单已提交的事件成功。如果 所有 表单都有效 - 我需要将用户重定向到另一个页面。
您能否提供任何建议如何实现这一目标？
【问题讨论】：
标签： javascript reactjs redux redux-form
关于解决方案：
submittedForms = 0 和 allFormsSubmitted = false；submittedForms 增加1 的操作，并且仅在state.submittedForms === N 时设置allFormsSubmitted = true。然后可能还会重置计数器。allFormsSubmitted 的变化。另一种方法是，在每次提交表单时，直接从 store 中读取 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};
...
}
}
【讨论】：
connect 为容器中的每个表单传递submitted 标志，例如xFromSuccessfullySubmitted: hasSubmitSucceeded(CLIENT_INFORMATION_FORM)(state), ...，然后在componentWillReceiveProps() 检查if (nextProps.xFromSuccessfullySubmitted && nextProps.yFromSuccessfullySubmitted && ...) { dispatch allFormsSuccessfullySubmitted() } Works好吧，但仍然不相信这是否是最佳解决方案
componentWillReceiveProps 中调度一个动作是个坏主意，当所有动作都提交时你会冒无限循环的风险。在你已经减少之后发送动作也是一种反模式。必须立即全部减少。请注意，您可以让多个 reducer 监听同一个操作。
SUBMIT_SUCCEDED，所以我无法确定提交过程中是否所有表单都成功。只是为了双重确认：我同时提交所有表单，然后 redux-form 调度自己的操作（可以是SUBMIT_SUCCEDED 或SUBMIT_FAILED
formName 的表单。
redirect 操作的问题？使用这样的减速器，我们知道allFormsSubmitted === true 处于状态，但这是一个减速器，我们无法调度任何操作。这就是为什么我认为它应该发送到componentWillRecieveProps
我可以在哪里以及如何捕获每个表单都已提交的事件 成功，我需要将用户重定向到另一个页面。
由于您同时提交所有表单，我遇到了同样的问题，这就是我设法解决此问题的方法：
回调函数传递给动作创建者（createPost）
onSubmit(values){
this.props.createPost(values, () => {
this.props.history.push('/');
});
除非帖子（表单）成功发布到后端 api 或数据库，否则它不会重定向用户，在这种情况下，用户将以编程方式重定向到 ('/') index.html ，您可以将任何路由传递给 @ 987654325@ 只要<Route /> 存在于<BrowserRouter> ('react-router-dom') 主（index.js）文件中
在 action creator 中，我使用 axios 向后端 API 发出发布请求，一旦成功发布 .then() 我通过回调函数重定向用户
import axios from 'axios';
export const CREATE_POST = 'create_post';
const ROOT_URL = 'http://xyz.app.com/api';
const API_KEY = '?key=xxxxx';
export function createPost(values, callback) {
const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, values)
.then(() => callback());
return {
type: CREATE_POST,
payload: request
};
}
您可以阅读有关编程导航的更多信息Here
【讨论】：