javascript - FormValidation JavaScript 变量范围和可访问性
问题描述
以下 JavaScript 给出了抛出错误Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute')
和未定义this.valid_form_submit_btn
的控制台日志,但此函数之外的相同变量是可访问的。
表单验证.js
"use strict";
//validation script
class MedValidation {
constructor(valid_form_id) {
this.valid_form = document.getElementById(valid_form_id);
this.valid_form_submit_btn = this.valid_form.querySelector('[type="submit"]');
}
init() {
this.valid_fv = FormValidation.formValidation(
this.valid_form, {
plugins: {
trigger: new FormValidation.plugins.Trigger({delay:0.5}),
submitButton: new FormValidation.plugins.SubmitButton(),
bootstrap: new FormValidation.plugins.Bootstrap(),
icon: new FormValidation.plugins.Icon({
valid: "fa fa-check",
invalid: "fa fa-times",
validating: "fa fa-refresh",
}),
fieldStatus: new FormValidation.plugins.FieldStatus({
onStatusChanged: function (areFieldsValid) {
console.log("test fieldStatus");
console.log(areFieldsValid);
console.log(this.valid_form_submit_btn);
if (areFieldsValid) {
// Enable the submit button
// so user has a chance to submit the form again
this.valid_form_submit_btn.removeAttribute("disabled");
} else {
// Disable the submit button
this.valid_form_submit_btn.setAttribute("disabled", "disabled");
}
},
}),
},
});
}
}
// webpack support
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
module.exports = MedValidation;
}
如何将变量传递给 onStatusChanged 函数?
解决方案
如果您不想丢失上下文,则必须使用箭头函数而不是常规函数。this
fieldStatus: new FormValidation.plugins.FieldStatus({
onStatusChanged: (areFieldsValid) => { // this
console.log("test fieldStatus");
console.log(areFieldsValid);
console.log(this.valid_form_submit_btn);
if (areFieldsValid) {
// Enable the submit button
// so user has a chance to submit the form again
this.valid_form_submit_btn.removeAttribute("disabled"); // and now `this` context is MedValidation class
} else {
// Disable the submit button
this.valid_form_submit_btn.setAttribute("disabled", "disabled");
}
},
})
很好的解释在这里
推荐阅读
- python - 查找包含点的字符串时,Django QuerySet过滤无结果
- r - 在 R 中线性化数据(部分反转 XTABS)
- python - 对于语言模型微调(BERT 通过 Huggingface Transformers),输入文件应该如何精确格式化?
- html - Chart.js br 图表仅显示第一个值
- html - 列位置固定的表格,不设置 td 和 th 的高度和宽度
- r - 修复 R 中的“每行输出必须由唯一的键组合标识”
- git - VS Code 自动将更改添加到本地存储库
- r - 调用另一个 R 脚本时的 R 错误处理
- typescript - JSON 完成的自定义扩展在双引号中不起作用
- python - 类型对象不可下标 BeatifulSoup