javascript - JS 文件中的函数不是由 index.js click evt 触发的

Question

我有一个名为 handleFileSelect 的函数，该函数应该由我的 index.js 文件中的 change 事件触发(作为最佳实践) ，所有事件都位于 index.js 中)。

当输入 .addEventListener('change', 时，该函数没有通过智能感知出现('change' 之后的第二个参数)。我相信问题必须是与组件的布局方式有关，但我不能 100% 确定。

我接管了这个项目，但不是设置组件的人。

<小时/>

calendar.js:

import axios from "axios";
import XLSX from "xlsx";
import { route } from "silkrouter";

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

  }

    initRoutes() { ... }

    loadEvents(myParam) { ... }

    parseAndUploadFile(file) {
        let reader = new FileReader();

        reader.onload = function(e) { 
         // in this block, I'm taking the contents of an uploaded Excel file and parsing it
        }
    } 

    addItemToList(getY, getZ) {

         // in this block, the contents from parseAndUploadFile are added to a list via POST
    }

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

        if (files.length > 0) {
            this.parseAndUploadFile(files[0]);
        }
    }

} // export default class

<小时/>

index.js:

import "jquery/dist/jquery.js";
import { router, route } from "silkrouter";
import globalInitProm from "./SiteAssets/scripts/global";
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();

}

initComponents();

/* various click evts are here */


document.getElementById('getFile').addEventListener('change', calendar.handleFileSelect, false); // intellisense can't find handleFS

<小时/>

HTML:

<input class="getFile" id="getFile" type="file" name="files[]" multiple="multiple"/>

Answer 1

const calendar 是在 initComponent 函数的范围内定义的，但您在不应定义它的地方使用它。将 ...addEventListener(...) 移至同一范围内，或使初始化的日历对象可用于您要使用它的范围。