Question

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

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

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

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

我使用opal和react.rb，所以代码可能看起来有些奇怪。

这是我的功能，可以截取表单上的提交操作

after_update

以下是我的回电：

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

我能够通过检查组件状态是否已经处于请求中间来减少请求量，同时这并没有减少添加的提交处理程序的数量，它确实从做任何事情，但它并没有阻止添加处理程序的实际倍增。

Answer 1

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

通过ajax提交的表单的请求与每个后续提交相乘

1 个答案: