Appel de la fonction dactylographiée de onclick

Question

J'ai créé une partition Web SharePoint Framework.

J'appelle un service web qui renvoie des données à partir de sharepoint (termes du termstore), et pour chaque terme, je génère un html qui affiche le terme. Sur l'onclick de chaque terme que je veux appeler une fonction de type, en passant le terme en tant que paramètres, pour obtenir ses termes enfants.

Ce code ci-dessous provoque les comportements suivants: lorsque la partie web est affichée, elle appelle automatiquement la fonction this.readIterm lorsque je n'ai même pas cliqué dessus! Est-ce que quelque chose me manque ou que je ne le fais pas de la bonne façon? J'ai essayé de remplacer onclick = "$ {this.readIterm (term)}" par onclick = "readIterm ($ (term))" mais cela ne fait rien.

code ci-dessous

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

Ce code HTML est ensuite ajouté à this.domElement.innerHTML, l'afficher dans le webpart.

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

Nous vous remercions d'avance pour votre aide et des conseils si je ne suis pas la meilleure pratique!

Jeff

Answer 1

Il existe un autre moyen d'attacher un écouteur d'événement.

Reportez-vous à l'exemple de code ci-dessous. Cela fonctionne parfaitement pour moi: (Note: Ceci est une idée de base Vous pouvez consulter ce code et apporter des modifications à la vôtre en conséquence..)

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 { 
    // 
    // 
    // 
} 

Une autre façon est comme ci-dessous. (Mais vous devrez faire quelques changements selon votre code)

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

Answer 2

plutôt onClick au lieu de onclick. Ensuite, vérifiez que vous entrez dans votre méthode "readIterm" en appelant la console (console.log).