单击 mithril.js 后如何禁用按钮以防止多次单击
How to disable button in after click in mithril.js to prevent multiple clicks
我可以在点击后禁用按钮,但页面没有提交,只是被禁用了。
如何提交页面并防止它在 mithril.js 中被多次点击?
m(".submit", m("input", {
type: "submit",
value: "Send email",
id: "emailbtn",
onclick: function () {
var butn = document.getElementById("emailbtn");
butn.disabled = true;
}
}))
我通常在组件的闭包中设置一个锁定变量。然后使用它来控制是否不传播提交事件。我假设您没有使用 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 的第 3 方库。因此,在我的回答中,我每次绘制输入时都使用 locked
变量来设置输入的 disabled
属性,而不是直接查找和操作 DOM。
关于使用闭包组件的 Mithril 文档:https://mithril.js.org/components.html#closure-component-state
我可以在点击后禁用按钮,但页面没有提交,只是被禁用了。 如何提交页面并防止它在 mithril.js 中被多次点击?
m(".submit", m("input", {
type: "submit",
value: "Send email",
id: "emailbtn",
onclick: function () {
var butn = document.getElementById("emailbtn");
butn.disabled = true;
}
}))
我通常在组件的闭包中设置一个锁定变量。然后使用它来控制是否不传播提交事件。我假设您没有使用 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 的第 3 方库。因此,在我的回答中,我每次绘制输入时都使用 locked
变量来设置输入的 disabled
属性,而不是直接查找和操作 DOM。
关于使用闭包组件的 Mithril 文档:https://mithril.js.org/components.html#closure-component-state