未捕获ReferenceError:未定义nxtCal

Question

我正在尝试引用一个类中另一个函数

我试图从onClickNavi函数引用nxtCal函数，但收到错误未捕获ReferenceError: nxtCal未定义，请帮助..下面是我的代码：

import {
    Controller
} from "stimulus"
import Rails from "@rails/ujs"
import 'tui-time-picker/dist/tui-time-picker.css';
import "tui-calendar/dist/tui-calendar.css";
import Calendar from "tui-calendar";


export default class extends Controller {
    thiis = this;


    calendar = new Calendar(document.getElementById('calendar'), {
        id: "1",
        name: "My Calendar",
        defaultView: 'month',
        color: '#00a9ff',
        bgColor: '#00a9ff',
        dragBgColor: '#00a9ff',
        borderColor: 'red',

        milestone: true, // Can be also ['milestone', 'task']
        scheduleView: true, // Can be also ['allday', 'time']
        useCreationPopup: true,
        useDetailPopup: true,
        template: {

            popupDetailRepeat: function(schedule) {
                return 'Repeat : ' + schedule.recurrenceRule;
            },

            popupStateFree: function() {
                return 'Free';
            },
            milestone: function(schedule) {
                return '<span style="color:red;"><i class="fa fa-flag"></i> ' + schedule.title + '</span>';
            },
            milestoneTitle: function() {
                return 'Milestone';
            },
            task: function(schedule) {
                return '&nbsp;&nbsp;#' + schedule.title;
            },
            taskTitle: function() {
                return '<label><input type="checkbox" />Task</label>';
            },
            allday: function(schedule) {
                return schedule.title + ' <i class="fa fa-refresh"></i>';
            },
            alldayTitle: function() {
                return 'All Day';
            },
            time: function(schedule) {
                return schedule.title + ' <i class="fa fa-refresh"></i>' + schedule.start;
            }
        },
        month: {
            daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            startDayOfWeek: 0,
            narrowWeekend: true
        },
        week: {
            daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            startDayOfWeek: 0,
            narrowWeekend: true
        }
    });

    nxtCal = () => {
        // this.calendar.next();
        alert("go nxt");
    }



    onClickNavi(e) {
        // var action = this.getDataAction(e.target);
        var target = e.target;
        if (target.dataset) {
            var action = target.dataset.action;
        } else {
            var action = target.getAttribute('data-action');
        }

        switch (action) {
            case 'move-prev':
                // calendar.prev();
                break;
            case 'move-next':
                nxtCal();
                // this.nxtCal();
                // calendar.next();
                break;
            case 'move-today':
                alert("alskd");
                // calendar.today();
                // console.log(calendar);
                break;
            default:
                return;
        }

    }

    setEventListener() {
        $('#menu-navi').on('click', this.onClickNavi);
        // this.nxtCal();
        // $('.dropdown-menu a[role="menuitem"]').on('click', onClickMenu);
        // $('#lnb-calendars').on('change', onChangeCalendars);

        // $('#btn-save-schedule').on('click', onNewSchedule);
        // $('#btn-new-schedule').on('click', createNewSchedule);

        // $('#dropdownMenu-calendars-list').on('click', onChangeNewScheduleCalendar);

        // window.addEventListener('resize', resizeThrottled);
    }



    connect() {
        this.setEventListener();
    }
}

我尝试将函数声明为calNxt(){}和calNxt=()=>{}，或者使用this关键字none is working

Answer 1

看起来您正在将箭头函数赋值给nextCal

nxtCal = () => {
        // this.calendar.next();
        alert("go nxt");
    }

但它从未初始化过。尝尝这个

const nxtCal = () => {
        // this.calendar.next();
        alert("go nxt");
    }