Question

我在使用TypeScript / JavaScript

时遇到问题

我有一个像这样的函数数组

private listeners: ((name: string) => void)[] = [];

我在另一个似乎有用的功能中添加了功能。

现在我想在按下按钮时调用这些功能

button.onclick = function(){
   this.listeners.forEach((callback) => callback(username));
}

如果我以这种方式尝试我的代码没有任何反应，我打赌这是因为它不知道listeners。

我的下一次尝试是

button.onclick = function(listeners){
       listeners.forEach((callback) => callback(username));
}

现在tsc告诉我

错误TS2339：属性＆＃39; forEach＆＃39;类型＆＃39; MouseEvent＆＃39;。
上不存在

我打赌我在这里错过了一个类型，但是如何告诉他这个数组是((name: string) => void)[] = [];类型的函数数组

如果有人知道快速的解决方法，那会很酷。在你问之前：我确定我的函数为我的数组添加了函数（至少在listerns大小的add函数中更大）：D

Answer 1

尝试定义这样的onclick处理程序，使'this'指向当前的类实例：

private onClick(ev)
{
    this.listeners.forEach((callback) => callback(username));
}

//Then somewhere later 
button.onclick = (ev) => this.onClick(ev);

Answer 2

您的主要问题是this未提及您的预期背景。相反，this指的是您的点击处理程序的MouseEvent上下文。

作为您问题的简单解决方案，您可以使用Function.prototype.bind()。

更改

button.onclick = function(){ 
   this.listeners.forEach((callback) => callback(username));
}

到此

button.onclick = function(){ 
   this.listeners.forEach((callback) => callback(username));
}.bind(this);

基本解释：

bind（）方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。

Answer 3

处理问题的一种更复杂的方法是根本不使用Debug.Log，而是使用onclick，并且您可以使用以下鲜为人知的方法来传递带有{{{的对象1}}方法到addEventListener，这使handleEvent所有问题都成了问题：

addEventListener

Answer 4

感谢你们的好处

我认为函数的直接添加不会起作用，因为它是一个Eventhandler函数，它在代码中的某处工作但不在我定义它的位置。

我改为addeventhandler并在我的函数中定义了一个函数，并为调用它应该调用的函数的Eventhandler调用一个新函数。＃funcception：D

let triggerOnClick = () => {
        let username = tf_name.value;
        this.listeners.forEach((callback) => callback(username));
    };

    btn_enter.addEventListener("click", () => {
        triggerOnClick();
    });

该代码有效：）

将函数数组传递给button.onclick函数

4 个答案: