SharePoint Framework onchange method not called

Question

I'm new to SPFx and doing this plain Javascript web part to kick off things but have hit a read block.

I can't seem to figure out on how to properly call the oncahnge method on a search input:

<input type="search" placeholder="Search the data"onchange="this._clickedMe()"/>

This is the method it's calling:

  private _clickedMe() {
    console.log('clicked Me');
  }

I also can't find the documents except for a few concept pages on MS devs site. Feel free to ask me any question to clear it up for you.

Thanks

Answer 1

That's only a convention. The JavaScript language does not give any special meaning to identifiers starting with underscore characters.

That said, it's quite a useful convention for a language that doesn't support encapsulation out of the box. Although there is no way to prevent someone from abusing your classes' implementations, at least it does clarify your intent, and documents such behavior as being wrong in the first place.

Answer 2

Refer below code sample. This will guide you:

public render(): void{ 

this.domElement.innerHTML = ` <div class="form-group">
   <input type="search" placeholder="Search the data" id="idSearch"/>
</div>`; 
this._setButtonEventHandlers(); 

}

private _setButtonEventHandlers(): void {
   const webPart: SpfxCrudWebPart = this;
   this.domElement.querySelector('#idSearch').addEventListener('click', () => {
      this._clickedMe();
   });
}


private _clickedMe(): void {
   console.log('clicked Me');
}