对通过 ajax 提交的表单的请求与每个后续提交成倍增加

Question

我有一个发出 ajax 请求的表单，问题是每次我单击它时，它发出该请求的次数都会成倍增加。

现在我确定这是因为我设置提交拦截的方式，但我不知道如何在将它封装为单个组件的同时做到这一点。

我正在使用 React 作为我的视图层，我附加了一个包含拦截请求的代码的函数，这个函数在 afterMount 回调和 after_update 回调中被调用;如果我不这样做，那么表单提交永远不会被拦截，或者它只拦截一次然后就正常提交。

现在显然它正在成倍增加，因为这些事件触发并添加了一个额外的提交处理程序。

我正在使用蛋白石和 react.rb，所以代码可能看起来有点奇怪。

这是我拦截表单上的提交操作的函数

def set_up_login_form
    puts 'setting up form'
    login_form = Element["#login_form"]
    login_form.on :submit do |event|
        unless login_state == :processing
            event.prevent_default
            username = login_form.find('#username').value
            password = login_form.find('#password').value
            login!
            self.username = username
            self.handle_login_submit({username: username , password: password})
        end 
    end
end

这是我的回电：

after_mount do
    fix_button #untill materialize.js gets fixed
    set_up_login_form
end

after_update do
    set_up_login_form
end

我能够通过检查组件状态是否已经在请求的中间来减少请求的数量，虽然这不会减少添加的提交处理程序的数量，但确实会阻止大量的请求做任何事情，但它不会停止添加处理程序的实际倍增。

Answer 1

我不知道为什么直到一位同事提到它我才想到它，但是通过将表单移动到子组件我现在可以运行表单组件上的拦截代码挂载其中只有在渲染时才会发生，所以问题已解决！

对通过 ajax 提交的表单的请求与每个后续提交成倍增加

Requests for a form that submits through ajax multiply with each subsequent submit

ruby

forms

reactjs

opal

react.rb