FormValidation的onStatusChanged无法访问类实例变量如何解决

你遇到的报错是this指向变更导致的：onStatusChanged使用普通函数声明时，函数内部的this不再指向MedValidation类的实例，而是指向了FormValidation的FieldStatus插件内部上下文，所以无法访问到this.valid_form_submit_btn属性。

方案1：使用箭头函数（最推荐） #

ES6 箭头函数不会创建独立的this上下文，会继承外层作用域的this，直接替换普通函数声明即可：

fieldStatus: new FormValidation.plugins.FieldStatus({
    // 替换为箭头函数
    onStatusChanged: (areFieldsValid) => {
        console.log("test fieldStatus");
        console.log(areFieldsValid);
        console.log(this.valid_form_submit_btn);
        if (areFieldsValid) {
            this.valid_form_submit_btn.removeAttribute("disabled");
        } else {
            this.valid_form_submit_btn.setAttribute("disabled", "disabled");
        }
    },
}),

方案2：提前缓存this引用 #

如果需要兼容不支持箭头函数的运行环境，可以在init函数开头先缓存类实例的this指向：

init() {
    // 缓存类实例的this
    const _this = this;
    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) {
                    if (areFieldsValid) {
                        _this.valid_form_submit_btn.removeAttribute("disabled");
                    } else {
                        _this.valid_form_submit_btn.setAttribute("disabled", "disabled");
                    }
                },
            }),
        },
    });
}

方案3：使用bind绑定this #

通过Function.prototype.bind手动把回调函数的this绑定为当前类实例：

fieldStatus: new FormValidation.plugins.FieldStatus({
    onStatusChanged: function (areFieldsValid) {
        console.log("test fieldStatus");
        console.log(areFieldsValid);
        console.log(this.valid_form_submit_btn);
        if (areFieldsValid) {
            this.valid_form_submit_btn.removeAttribute("disabled");
        } else {
            this.valid_form_submit_btn.setAttribute("disabled", "disabled");
        }
    }.bind(this), // 绑定当前类实例的this
}),

内容的提问来源于stack exchange，提问作者Ashish Kularia