Sharepoint 2013 从onclick调用typescript函数

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

我调用了一个Web服务，它从sharepoint返回一些数据（termstore中的术语），并为每个术语生成一个显示该术语的html。在单击每个术语时，我想调用一个typescript函数，将术语作为参数传递，以获取其子术语

下面的代码创建了以下错误行为：当显示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>`

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(); });
}

terms.forEach（term=>{
htmlContent+=
`
标题
${term.name}

页脚
`

然后将此html添加到This.domeElement.innerHTML，并在Web部件中显示

public readIterm（myTerm:ITerm）{
警报（“已单击readIterm”）；
}

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

---

Jeff

宁愿使用onClick而不是onClick。然后检查以确保通过调用控制台（console.log）进入“readIterm”方法。

宁愿使用onClick而不是onClick。然后检查以确保通过调用控制台（console.log）进入“readIterm”方法.

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

请参阅下面的代码示例。这对我来说非常适用： （注意：这是一个基本概念。您可以参考此代码并相应地对您的代码进行更改。）

public render（）：void{
this.doElement.innerHTML=`
阅读所有项目
按Id读取项目
`; 
这个；
}
private _setButtonEventHandlers（）：void{
const webPart:SpfxCrudWebPart=this；
this.domeElement.querySelector（“#btnReadAllItems”）.addEventListener（'click'，（）=>{
这是。_GetListItemsNF（）；
});
}
private\u GetListItemsNF（）：void{
// 
//
//
}

另一种方法如下（但您必须根据您的代码进行一些更改）

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>`

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(); });
}

public render（）：void{
htmlContent+=
`
标题
${term.name}

页脚
`
}
这个；
this.myTerm=term；//这里我们给'myTerm'变量赋值。而'myTerm'是一个公共属性，因此可以使用'this.myTerm'访问'myTerm'的值`
}
public myTerm:ITerm；//这里我们声明'myTerm'变量
public readIterm（）：void{
//在这里，您可以使用'this.myTerm'访问可访问的'myTerm'。
//警报（本.myTerm）；
//警报（“已单击readIterm”）；
}
private _setButtonEventHandlers（）：void{
this.domeElement.querySelector（'#test'）.addEventListener（'click'，（）=>{this.readIterm（）；}）；
}

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

请参阅下面的代码示例。这对我来说非常适用： （注意：这是一个基本概念。您可以参考此代码并相应地对您的代码进行更改。）

public render（）：void{
this.doElement.innerHTML=`
阅读所有项目
按Id读取项目
`; 
这个；
}
private _setButtonEventHandlers（）：void{
const webPart:SpfxCrudWebPart=this；
this.domeElement.querySelector（“#btnReadAllItems”）.addEventListener（'click'，（）=>{
这是。_GetListItemsNF（）；
});
}
private\u GetListItemsNF（）：void{
// 
//
//
}

另一种方法如下（但您必须根据您的代码进行一些更改）

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>`

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(); });
}

public render（）：void{
htmlContent+=
`
标题
${term.name}

页脚
`
}
这个；
this.myTerm=term；//这里我们给'myTerm'变量赋值。而'myTerm'是一个公共属性，因此可以使用'this.myTerm'访问'myTerm'的值`
}
public myTerm:ITerm；//这里我们声明'myTerm'变量
public readIterm（）：void{
//在这里，您可以使用'this.myTerm'访问可访问的'myTerm'。
//警报（本.myTerm）；
//警报（“已单击readIterm”）；
}
private _setButtonEventHandlers（）：void{
this.domeElement.querySelector（'#test'）.addEventListener（'click'，（）=>{this.readIterm（）；}）；
}

它按照代码的定义进入readIterms。但甚至没有点击。每次显示一个术语时，它都会进入readIterms；但是你的方法来自哪里？它包含在你的模块中吗？还是被导入了？如果你的方法被导入，那么直接在那里调用它（例如{maMethode（）}，不需要这样做）。否则，如果在模块的参数中传递，则在调用它之前在本地声明。希望有帮助。该方法位于相同的TS文件公共readIterm（myTerm:ITerm）{alert（“readIterm已单击”）；}如果要通过单击执行操作，则必须在模块中声明将其附加到事件的方法（例如：const readIterm_=event=>（）{readIterm（）}）。除非将该方法显式传递给模块，否则我看不到如何从模块中调用服务器方法（知道您模块的上下文是在{}中分区的。它按照代码定义进入readIterms。但是，甚至没有单击。每次显示一个术语时，它都会进入readIterms；但是您的方法从何而来？它包含在您的模块中吗？还是导入了？如果导入了您的方法，则直接在那里调用它（例如{maMethode（）}，