时间戳

首页 > 解决方案 > 如何在点击 mithril.js 后禁用按钮以防止多次点击

javascript - 如何在点击 mithril.js 后禁用按钮以防止多次点击

问题描述

单击后我能够禁用该按钮，但该页面没有被提交，它只是被禁用了。如何提交页面并防止它在 mithril.js 中多次点击？

m(".submit", m("input", {
    type: "submit",
    value: "Send email",
    id: "emailbtn",
    onclick: function () {
       var butn = document.getElementById("emailbtn");
       butn.disabled = true;
    }
}))

标签： javascripthtmlmithril.js

解决方案

我通常在组件的闭包中设置一个锁定变量。然后使用它来控制是否不传播提交事件。我假设您没有使用 JS 提交表单。

function MyForm() {
    var locked = false;
    function onSubmit(e) {
        console.log('onSubmit');
        if (!locked) {
            // Lock our submit function so it does nothing if triggered again
            locked = true;
            console.log("Send email.");
        } else {
          e.preventDefault();
        }       
    }
    return {
        view: function (vnode) {
            return m('form', {
                method: "post",
                action: "",
                onsubmit: onSubmit
            }, m(".submit", m("input", {
                type: "submit",
                value: "Send email",
                id: "emailbtn",
                disabled: locked,
            })));
        }
    };
}

通常，您希望避免像在 jQuery 中那样使用 id 来操作 dom，除非您使用带有实际 jQuery 的 3rd 方库。所以在我的回答中，我每次绘制时都使用locked变量来设置输入的属性，而不是直接查找和操作 DOM。disabled

关于使用闭包组件的秘银文档：https ://mithril.js.org/components.html#closure-component-state

推荐阅读