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.



2 Answers 2


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.


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"/>


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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.