时间戳

首页 > 解决方案 > Javascript如何在一个类方法上使用onclick事件来调用另一个类方法？

javascript - Javascript如何在一个类方法上使用onclick事件来调用另一个类方法？

问题描述

如何onclick在一个类方法上使用事件来调用另一个类方法？

当我尝试这样做时，会出现此错误：

未捕获的 TypeError：this.method1 不是 HTMLButtonElement.document.getElementById.onclick 处的函数（example.html:24）

我怀疑onclick event只接受一个回调函数而不是一个方法。

他们是一种解决方法吗？

这是一个示例：

class Example {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.method2();
  }
  method1(evt) {
    console.log(evt)
    alert("Example Rendered")
  }

  method2() {
    document.getElementById("button").onclick = function() {
      this.method1(event);
    }
  }

}

new Example('alexander', '23');
<button id="button"> Click me </button>

标签： javascript

解决方案

在这样的函数中使用时，关键字this具有不同的绑定。在这种情况下，它正在反弹引用按钮。由于您无论如何都在使用 ES6 类，因此您可以使用 ES6 箭头函数表示法来创建一个不会重新绑定的函数this：

document.getElementById("button").onclick = event => {
  this.method1(event);
}

为了这个答案的完整性，在 ES5 中，你可以这样做：

document.getElementById("button").onclick = this.method1.bind(this);

这确保this在函数运行时绑定到类，而不是按钮元素。

推荐阅读