Как отключить кнопку после нажатия в mithril. js для предотвращения множественных нажатий - PullRequest
Новая
       6

Как отключить кнопку после нажатия в mithril. js для предотвращения множественных нажатий

0 голосов
/ 19 июня 2020

Мне удалось отключить кнопку после щелчка, но страница не отправляется, она просто отключена. Как я могу отправить страницу и предотвратить ее многократное нажатие в mithril. js? 

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

1 Ответ

1 голос
/ 19 июня 2020

Я обычно устанавливаю блокирующую переменную в закрытии компонента. Затем используйте это, чтобы контролировать, не распространяется ли событие отправки. Я предполагаю, что вы не отправляете форму с помощью 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,
            })));
        }
    };
}

Обычно вы хотите избежать использования идентификаторов для управления dom, как в jQuery, если вы не используете стороннюю библиотеку с фактическим jQuery. Итак, в своем ответе я использую переменную locked, чтобы устанавливать свойство disabled ввода каждый раз, когда он отрисовывается, вместо того, чтобы выполнять поиск и напрямую управлять DOM.

Документация Mithril по использованию компонентов закрытия : https://mithril.js.org/components.html#closure -состояние компонента

...