对通过ajax提交的表单的请求与每个后续提交一起乘以

Question

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

现在，我确信这是因为我设置了提交拦截的方式，但我不知道怎么做，同时仍然将它封装为一个组件。

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

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

我使用opal和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

我不知道为什么我没有想到它，直到一位同事提到它，但通过将表单移动到一个子组件，我现在可以运行拦截代码的表单组件挂载，只有当它呈现这样的问题解决了！