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为空。我怎么能纠正这个？

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

Answer 1

您丢失了this上下文，因为您在未调用原型的地方使用了类方法（this.pasteHandler）（在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

从paste事件中，Typescript回调为null

1 个答案: