从 onclick 调用打字稿功能

Question

我创建了一个 SharePoint 框架 Web 部件。

我调用了一个 Web 服务，该服务 returns 来自 Sharepoint 的一些数据（来自 termstore 的术语），并且对于每个术语，我生成一个 html 来显示该术语。在单击每个术语时，我想调用一个打字稿函数，将术语作为参数传递，以获取其子术语。

下面的代码造成以下错误行为：当显示 web 部件时，它会自动调用函数 this.readIterm，而我什至没有点击它！

我是不是遗漏了什么，或者是故意以错误的方式做的？我试图用 onclick="readIterm($(term))" 替换 onclick="${this.readIterm(term)}" 但它什么也没做。

代码如下

terms.forEach(term => {
              htmlContent +=
                `<div class="w3-card w3-third w3-margin-bottom" style="" onclick="${this.readIterm(term)}">
                      <header class="w3-container w3-blue">
                        <h1>Header</h1>
                      </header>
                    <div class="w3-container">
                      <span>${term.name}</p>
                    </div>
                    <footer class="w3-container w3-blue">
                      <h5>Footer</h5>
                    </footer>
                    </div>`

然后将此 html 添加到 this.domElement.innerHTML，在 Web 部件中显示它。

public readIterm(myTerm: ITerm) { alert("readIterm is clicked"); }

如果我没有遵循最佳实践，请提前感谢您的帮助和指导！

杰夫

Answer 1

用 onClick 代替 onclick。然后检查以确保通过调用控制台 (console.log).

进入 "readIterm" 方法

Answer 2

还有一种附加事件侦听器的方法。

参考下面的代码示例。这非常适合我：（注意：这是一个基本思路，您可以参考此代码并相应地进行更改。）

public render(): void{ 

this.domElement.innerHTML = ` <div class="form-group">
   <button class="btn btn-success" id="btnReadAllItems">
      <span class="ms-Button-label">Read All Items</span>
   </button>
   <button class="btn btn-success" id="btnReadItemById">
      <span class="ms-Button-label">Read Item By Id</span>
   </button>
</div>`; 
this._setButtonEventHandlers(); 

}



private _setButtonEventHandlers(): void {
   const webPart: SpfxCrudWebPart = this;
   this.domElement.querySelector('#btnReadAllItems').addEventListener('click', () => {
      this._GetListItemsNF();
   });
}


private _GetListItemsNF(): void {
   // 
   //
   //
}

另一种方法如下。（但是你得根据你的代码做一些修改）

public render(): void{ 
      htmlContent +=
        `<div class="w3-card w3-third w3-margin-bottom" id="test">
              <header class="w3-container w3-blue">
                <h1>Header</h1>
              </header>
            <div class="w3-container">
              <span>${term.name}</p>
            </div>
            <footer class="w3-container w3-blue">
              <h5>Footer</h5>
            </footer>
        </div>`
    }

    this._setButtonEventHandlers(); 

    this.myTerm = term;  // Here we are assigning value to the `myTerm` variable. And `myTerm` is a public property, So value of `myTerm` will be accessible using `this.myTerm`
}


public myTerm: ITerm; // here we are declaring `myTerm` variable

public readIterm():void{

    // here you can access the cariable `myTerm` using `this.myTerm`.

    // alert(this.myTerm);

    // alert("readIterm is clicked"); 

}

private _setButtonEventHandlers(): void {
   this.domElement.querySelector('#test').addEventListener('click', () => { this.readIterm(); });
}

从 onclick 调用打字稿功能

Call typescript function from onclick

sharepoint-2013

sharepoint-online

spfx