Uncaught type error: «(вызов функции) не является функцией»

Question

Я пытаюсь вызвать функцию с помощью метода, но получаю сообщение об ошибке, в котором говорится, что это «не функция». Раньше у меня был JS код в моем HTML, но после того, как я переместил его в его текущее местоположение (которое использует класс и конструктор), функциональность перестала работать. Поэтому я думаю, что что-то упускаю из-за классов / конструкторов, но я не уверен, что.

index. js:

import calendarComponent from "./SiteAssets/scripts/calendar";

let isAdmin;

async function initComponents() {
  isAdmin = await isAdminMember();
  const { globalData, mmUser } = await globalInitProm(isAdmin);

  const calendar = new calendarComponent(globalData, mmUser);
  calendar.initRoutes();

  document.getElementById('getFile').addEventListener('change', calendar.handleFileSelect, false); // ----- click event ----- //

}

initComponents();

---

календарь. js:

export default class {
  constructor(globalData, mmUser) {
    this.globalData = globalData;
    this.isAdmin = mmUser.IsAdmin;
    this.calendar = null;
  }

  initRoutes() {}

  handleFileSelect(evt) {
    console.log("handleFileSelect fired"); // works
    let files = evt.target.files;

    if (files.length > 0) {
      this.parseAndUploadFile(files[0]); // "Uncaught TypeError: this.parseAndUploadFile is not a function"
    }
  }

  parseAndUploadFile(file) {
    console.log("trying to load excel file");
    let reader = new FileReader();

    reader.onload = function (e) {
      // etc
    };
  }
}

Answer 1

Чтобы решить эту проблему, используйте bind или delegate callback.

export default class {
  constructor(globalData, mmUser) {
    this.globalData = globalData;
    this.isAdmin = mmUser.IsAdmin;
    this.calendar = null;
    this.handleFileSelect = this.handleFileSelect.bind(this) // bind this here
  }
  // rest od the code

}