Вызов функции машинописи из onclick
Я создал веб-часть SharePoint Framework.
Я вызываю веб-сервис, который возвращает некоторые данные из sharepoint (термины из хранилища терминов), и для каждого термина я генерирую HTML, который отображает термин. При нажатии каждого термина я хочу вызвать функцию машинописного текста, передавая термин в качестве параметров, чтобы получить его дочерние термины.
Этот код ниже создает следующее неправильное поведение: когда веб-часть отображается, она автоматически вызывает функцию this.readIterm, когда я даже не нажимаю на нее!
Я что-то упустил или по замыслу сделал это неправильно? Я попытался заменить onclick = "$ {this.readIterm (term)}" на onclick = "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, отображая его в веб-части.
public readIterm(myTerm: ITerm) {
alert("readIterm is clicked");
}
Заранее благодарю за помощь и руководство, если я не следую наилучшей практике!
Джефф
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 вместо onclick. Затем убедитесь, что вы попали в метод readIterm, вызвав консоль (console.log).