将表单 onSubmit 委托给 Flux Actions 的集中函数

Question

我有一个具有许多不同形式的 React 应用程序，我希望不必为每种形式一遍又一遍地编写相同的代码，并且我正在寻找一种简单的方法来集中 onSubmit()所有形式的处理程序。从中央位置，我可以触发将触发 ajax 调用的特定 Flux 操作。

我正在想象一个处理所有表单请求的函数。

function (event) {
  event.preventDefault()
  var $elm = $(event.target)
  var d = {}
  d.method = $elm.attr('method')
  d.action = $elm.attr('action')
  d.data = $elm.serialize()
  console.log(d)
}

从这里我可以检查 action 和 method 并为每种可能性进行切换。

这在 Flux 架构中有意义吗？

Answer 1

您无论如何都需要从特定组件收集数据，因此您必须为其编写单独的函数，但发送 action 等其他任务可以在 onSubmit 中完成父组件的功能。因此，将带有数据的子组件中的所有 onSubmit 事件通过 props 委托给父组件的 onSubmit 函数。

你也可以添加一个 identifier 就像我们在调度器中做的 constants 一样，来识别特定的 onSubmit 事件，然后在父组件中使用 switch 语句发送基于identifier。

如果有一个用例，我想它是有道理的。

将表单 onSubmit 委托给 Flux Actions 的集中函数

Centralized function to delegate form onSubmit to Flux Actions

javascript

forms

events

flux

reactjs