如何将按钮单击操作链接到TypeScript代码？

Question

使用JavaScript，您通常会执行此操作来处理按钮点击：

<button id="myButton" onclick="myClickHandler">Click!</button>

您在JavaScript代码中的位置：

function myClickHandler { /* some action */ }

在我的TypeScript代码中，我有一个应用程序类MyApp（在MyApp.ts中）：

class MyApp
{
  myClickHandler() { /* some action */ }
}

我在主main.ts文件中有这个：

let myApp = new MyApp();

我想在按钮的onclick语句中引用myApp，但这不起作用：

<button id="myButton" onclick="myApp.myClickHandler">Click!</button>

当我在代码中明确链接事件处理程序时，它可以工作：

document.getElementById("myButton").onclick = () => { myApp.myClickHandler(); }

所以，我的问题是：如何从HTML代码中将按钮单击事件处理程序连接到MyApp类实例的成员函数？

（我知道我应该使用一个框架来处理这些事情，稍后我会继续讨论React，但我想先把它做好）

Answer 1

这基本上没问题，但我会：

• 不使用let作为全局变量（myApp）

• 将myClickHandler定义为箭头功能（就像在onClick覆盖中一样）

  class MyApp {
      myClickHandler = (): void => { /* some code */ }
   }