Stimulus类内调用方法报Uncaught ReferenceError: nxtCal未定义如何解决

• 直接调用nxtCal()属于访问全局作用域下的同名函数，而nxtCal是类的实例方法，必须通过实例的this访问
• 你通过jQuery绑定点击事件时直接传入this.onClickNavi，回调函数执行时this会指向触发点击的DOM元素，而非Stimulus控制器实例，因此就算写this.nxtCal()也无法找到对应方法

两种方案任选其一即可：

方案1：将onClickNavi改为箭头函数（推荐） #

箭头函数的this继承自定义时的上下文，会固定指向控制器实例，无需额外绑定：

// 修改onClickNavi的定义方式为箭头函数
onClickNavi = (e) => {
    var target = e.target;
    var action = target.dataset ? target.dataset.action : target.getAttribute('data-action');

    switch (action) {
        case 'move-prev':
            break;
        case 'move-next':
            this.nxtCal(); // 调用时加上this
            break;
        case 'move-today':
            alert("alskd");
            break;
        default:
            return;
    }
}

方案2：绑定事件时用bind固定this指向 #

无需修改onClickNavi的定义，只需要在绑定事件时手动固定this指向：

setEventListener() {
    // 通过bind方法将回调的this固定为当前控制器实例
    $('#menu-navi').on('click', this.onClickNavi.bind(this));
}

// onClickNavi内调用时加上this
case 'move-next':
    this.nxtCal();
    break;

内容的提问来源于stack exchange，提问作者Sir Nova