typescript - 如何在更改事件和类对象变量上使用文本区域？

Question

我有一个 class 对象TextManager，它有一些xx在构造函数中最初设置为零的数字。我希望能够xx在文本区域更改时更新对象的变量。

class Drawer {
    canvasElement: HTMLCanvasElement;
    constructor(_canvasElement: HTMLCanvasElement) {
        this.canvasElement = _canvasElement;
    }
    drawCircle(x:number,y:number,radius:number,color:string) {
        var ctx = this.canvasElement.getContext("2d");
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fillStyle = color;
        ctx.closePath();
        ctx.fill();
    }
}

var canv;
var drawer;
var d = 0;
var textAreaElement;
var textManager;

class TextManager{
    textAreaElement: HTMLAreaElement;
    xx: number;
    constructor(_textAreaElement: HTMLAreaElement) {
        this.textAreaElement = _textAreaElement;
        this.xx = 0;
        this.textAreaElement.onchange = this.update;
    }

    update() {
        this.xx += 10;
        if (this.xx > 50) this.xx = 0;
        drawer.drawCircle(95 + this.xx, 50, 40, "#FF0000");

    }
}

window.onload = () => {
    canv =  <HTMLCanvasElement>document.getElementById("myCanvas");
    drawer = new Drawer(canv);
    textAreaElement = <HTMLAreaElement>document.getElementById("codeArea");
    textManager = new TextManager(textAreaElement);
};

问题是在代码中使用这种方式会导致xx = NaN. 因为我认为它没有访问成员，它只是访问类中的函数。

如何在xx每次事件发生时更新对象？

Answer 1

您需要在方法中捕获所需的this值update。最简单的解决方法是改变

this.textAreaElement.onchange = this.update;

至

this.textAreaElement.onchange = () => this.update();