提问人:Mini Programmer 提问时间:10/23/2022 更新时间:10/23/2022 访问量:207
无法从事件处理程序访问类变量
Can't access the class variables from a event handler
问:
我正在制作一个用于安排座位的 Web 应用程序,我编写了以下代码:
class SeatMap {
constructor (parentElement) {
this.#createSeats();
}
#createSeats () {
this.seatList = [];
for (let a = 0; a < this.row; a++) {
for (let b = 0; b < this.column; b++) {
this.seatList[a].push(new Seat(this,a,b));
}
}
}
class Seat {
constructor(seatContainer, rowNum, colNum) {
this.seatContainer = seatContainer;
this.seatTB.addEventListener("keydown", this.#keydownTB);
}
// Key Events Handler
#keydownTB (event) {
const seatContainerConector = this.seatContainer;
if (event.key === "ArrowRight") {
console.log(seatContainerConector); // Undefined
}
}
}
// I only wrote codes related to the problem here.
但是,只是把我还给我.
我试图删除并使用,但它没有用。
我该如何解决这个问题?console.log(seatContainerConector);
undefined
const seatContainerConector = this.seatContainer;
console.log(this.seatContainer);
答:
1赞
Kokodoko
10/23/2022
#1
你的代码很难调试,因为你遗漏了一些基本元素,比如 、 和 、 等。new SeatMap()
row
column
this.seatTB
keydown 事件处理程序中的一个问题是,您的范围不是您期望的。这会导致引用错误的范围。您引用的不是类实例,而是导致 keydown 事件的元素。在该元素上,是this.seatContainer
this.seatContainer
undefined
您可以使用箭头功能来解决这个问题。
this.seatTB.addEventListener("click", (e) => this.keydownTB(e));
现在将引用 的实例,而不是导致事件的元素。this
new Seat()
评论
<Seat>