Вызов функции машинописи из 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).

Другие вопросы по тегам