Question

我有一个类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();

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

1 个答案: