gpt4 book ai didi

javascript - 了解所有 redux-forms 已成功提交的最佳方法是什么?

转载 作者:行者123 更新时间:2023-11-29 21:00:19 25 4
gpt4 key购买 nike

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

当用户单击所有表单之外的“提交”按钮时(使用 Remote Submit ),我触发了每个表单的提交,并想了解我在哪里以及如何捕获每个表单已提交的事件成功。如果所有表单都有效 - 我需要将用户重定向到另一个页面。

您能否就如何实现这一点给出任何建议?

最佳答案

关于解决方案:

  • 有变量submittedForms = 0allFormsSubmitted = false在您的初始商店状态;
  • 在每次提交表单时,发送一个增加 submittedForms 的 Action 1,并设置 allFormsSubmitted = true仅当state.submittedForms === N .然后可能还会重置计数器。
  • 让另一个组件监听 allFormsSubmitted 的变化.

另一个是,在每次提交表单时,直接从存储中读取由 redux-forms 生成的状态,以获取标志,例如 submitted=true您定义的每种形式都可能存在。如果所有人都设置了标志,则触发一个 Action ,使 allFormsSubmitted = true .这样,您就不必管理表单的数量 N (容易发生变化)。

编辑:监听 redux-forms Action 的自定义 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};

...
}
}

关于javascript - 了解所有 redux-forms 已成功提交的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46828267/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com