Question

我正在使用 Polymer 3.0 来实现我的网站。我正在 javascript 中创建按钮。我想在单击按钮时调用用户定义的函数。

我尝试添加事件侦听器，但是该函数在页面加载后立即被调用。我尝试在bu.onclick函数中调用该函数，但该函数未被调用

//我的下面的代码

import { PolymerElement, html } from "./node_modules/@polymer/polymer/polymer-element.js";

class MyPage extends PolymerElement {
  static get template() {
    return html`
           <!-- Some useful div elements -->
           <iron-ajax 
                auto
                url= // my url
                handle-as="json"
                on-response="response"
                on-error="_statusFailed"
                last-error="{{lastError}}"
                last-response="{{lastResponse}}"
                debounce-duration="300">
        </iron-ajax>
     `;
}

constructor()
{
    super(); 
}

response()
{
    let list = this.shadowRoot.querySelector('#list');
    let bu = document.createElement('button');

    bu.onclick=function()
    {
        let a= this.value;
        console.log('Button Value: '+a);
        this.buttonprocessor(a);
    };
    list.append(bu);
}

buttonprocessor(msg)
{
    //some code 
}

当我单击创建的按钮时，出现以下错误

Uncaught TypeError: this.buttonprocessor is not a function
 at HTMLButtonElement.bu.onclick

谢谢。

Answer 1

我认为错误消息指向this.buttonprocessor未定义的正确方向。用箭头功能切换功能，这应该是很好的原因，然后它将指向正确的类。

bu.onclick=() => {
    let a= this.value;
    console.log('Button Value: '+a);
    this.buttonprocessor(a);
};

在函数状态内的this始终指向函数本身，您也可以这样解决：

var that = this;
bu.onclick=function()
{
    let a= this.value;
    console.log('Button Value: '+a);
    that.buttonprocessor(a);
};

无法在Polymer中进行用户定义的函数调用

1 个答案: