傳遞一個函數陣列的函數button.onclick

我有麻煩打字稿/ JavaScript的傳遞一個函數陣列的函數button.onclick

我的功能這樣

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：房產 '的forEach' 不上鍵入「MouseEvent的存在。

我敢打賭，我在這裏缺少一個類型，但IDK的如何告訴他，這是數組類型的函數數組如果有人知道一個快速的解決方法((name: string) => void)[] = [];

會很酷。之前你問：我敢肯定，我的功能增加了我的陣列功能（至少在添加功能的大小listerns變大）：D

來源

2016-08-05 Julius Schönhut

您必須描述一些對象，但我們不知道它是什麼。你的猜測並沒有解決，因爲'this'將是對元素本身的引用，你的函數參數接收事件對象。所以，也許你可以給我們一個完整而簡單的例子。 – 2016-08-05 13:55:58

你什麼意思是「什麼都沒有發生」？我認爲它會產生一個控制檯錯誤 - 你看它嗎？ – 2016-08-05 19:31:04

嘗試定義您的onclick處理程序這樣保持'這'指向當前的類實例：

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

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

來源

2016-08-05 19:19:40 Amid

你的主要問題是，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（）方法創建一個新的函數，調用它時，有該關鍵字設置爲提供的值，在調用新函數時提供的任何前面給定的參數序列。

來源

2016-08-05 19:27:12 WoIIe

一個處理您的問題更復雜的方法是不使用onclick所有，而是addEventListener，並且可以使用傳遞一個對象與handleEvent方法addEventListener，這使得下面的鮮爲人知的方法與this沒有實際意義的所有問題：

class Foo { 

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

    constructor(button) { 
    button.addEventListener('click', this); 
    } 

    handleEvent(event) { 
    // check event type 
    this.listeners.forEach(callback => callback(username)); 
    } 

} 

const new Foo(document.getElementById('myButton'));

來源

2016-08-05 19:37:11

感謝awnsers

我想這一個功能直接添加不會因爲其工作的事件處理功能，其工作的地方在代碼中但不是在那裏我定義它。

我改的addEventHandler，並讓我的函數中的函數定義，並呼籲事件處理一個新的函數，它們調用它應該調用＃funcception的功能：d

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

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

代碼工程:)

來源

2016-08-08 14:35:34

傳遞一個函數陣列的函數button.onclick

回答

相關問題