onclick调用打字稿功能

问题描述：

我创建了一个SharePoint框架Web部件。onclick调用打字稿功能

我打电话给Web服务，从sharepoint（术语termstore）返回一些数据，并为每个术语生成显示该术语的html。在每个术语的onclick上，我想调用打字稿功能，将该术语作为参数传递，以获取其子项。

下面的代码会产生以下错误行为：当显示webpart时，它会自动调用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"); }

预先感谢您的帮助和指导，如果我不遵循最佳实践！

杰夫

答

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

请参阅下面的代码示例。这完美的作品对我来说：（注：这是一个基本的想法，您可以参考此代码，并做出相应的改变到你。）

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

我无法使用你的解决方案，因为我从术语库中获得条款，对于每个术语，我生成一个HTML来显示它。点击术语我需要通过选定的术语，这就是为什么我想要这样做：onclick =“$ {this.readIterm（term）}”>也许这不是好的做法。谢谢你的时间:) – Jeff

请参考上面的答案。我已经更新并添加了一种方法。你可以试试这种方式。 –

嗨，感谢您的帮助我想我可以填充术语对象数组，然后迭代这些对象（我的术语），然后调用onclick并将对象作为参数传递。我不知道这是否是好设计。也许反应对此有帮助？ – Jeff

答

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

它进入readIterms作为定义的代码。但没有点击。每次显示一个词时都会进入内部; – Jeff

但是你的方法从哪里来？它是否包含在你的模块中？否则导入？如果你的方法被导入，然后直接调用它（例如{maMethode（）}，不需要这个）。否则，如果它在你的模块的参数中传递，那么在调用它之前在本地声明它。希望能有所帮助。 – Thedaril

该方法位于同一个TS文件中 – Jeff

onclick调用打字稿功能

相关推荐