粘贴事件的打字稿回调为空

Question

interface myCallbackType { (dataType: string): void }

class PasteUtilities {

    public myCallback: myCallbackType;   

    public pasteHandler(e) {
        var items = e.clipboardData.items;
        for (var i = 0; i < items.length; i++) {
            console.log('file received');
            this.myCallback(items[i].type);
        }
    }

    public RegisterEvent() {
        window.addEventListener("paste", this.pasteHandler);
    }    
}

var utils = new PasteUtilities();    
utils.myCallback = function (dataType: string) {
    console.log('Filetype: ' + dataType);
}
utils.RegisterEvent();
utils.myCallback('test type'); //test to make sure it's wired up right

此代码的目的是在将文件粘贴到浏览器中时发挥某些作用运行。运行的函数存储在 myCallback.

我的测试顺序是访问页面并粘贴单个文件。这是我粘贴 png 文件时的预期输出。

Filetype: test type
file received
Filetype: image/png

这是我的实际输出：

Filetype: test type
file received
Uncaught TypeError: this.myCallback is not a function

估计是浏览器粘贴事件的上下文不一样，所以myCallback为null。我该如何纠正？

我已经在 possible duplicate mentioned 中查看了这个问题，但我不明白它与我在这里所做的事情有什么关系。

Answer 1

您丢失了 this 上下文，因为您在未调用它的地方（在 RegisterEvent).

您需要进行以下编辑：

    public RegisterEvent() {
        // Use arrow function here
        window.addEventListener("paste", e => this.pasteHandler(e));
    }

或此编辑：

// Use arrow function here
public pasteHandler = (e) => {
    var items = e.clipboardData.items;
    for (var i = 0; i < items.length; i++) {
        console.log('file received');
        this.myCallback(items[i].type);
    }
}

另见 TypeScript "this" scoping issue when called in jquery callback

粘贴事件的打字稿回调为空

Typescript callback is null from paste event

javascript

callback

this

typescript