0

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

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

我使用 react 作为我的视图层，并且我附加了一个函数，其中包含拦截请求的代码，并且在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

我能够通过检查组件状态是否已经在请求中间来减少请求的数量，虽然这并没有减少添加的提交处理程序的数量，但它确实阻止了很多事情，但是它不会停止添加处理程序的实际乘法。

4

1 回答 1

0

我不知道为什么直到同事提到它之前我才想到它，但是通过将表单移动到子组件，我现在可以在表单组件挂载上运行拦截代码，这只发生在它被渲染时，问题解决了！

于 2015-08-20T09:55:21.720 回答