允许 HTML 的 onClick 访问模块的 function 的最干净的方法？

Question

Say I have a class:

export default class SubmitModal {
  constructor () {
    this.element = document.createElement('div')
    this.element.classList.add('modal')
    this.element.innerHTML = this.generateContentHTML()
  }

  generateContentHTML () {
    return `
      <div class='modal-content'>
        a bunch of other things
        <button onClick={this.submit()}>Submit</button>
      </div>
    `
  }

  submit () {
     console.log('submitted!')
  }
}

What would be the cleanest way for the button element to access this.submit ?

I could make the submit function a global by appending it to the window variable; however, that seems bad in the long run (if I have two submit functions, etc.).

I also realize that I could simply create a button element and add and event listener to it, but is there any way I could do the same utilizing HTML's onClick ?

Thanks

Answer 1

Don't create it as HTML. Create the button using document.createElement() , then use addEventListener() to add the class method as the listener.

 export default class SubmitModal { constructor () { this.element = document.createElement('div') this.element.classList.add('modal') this.element.appendChild(this.generateContent()); } generateContentHTML () { let div = document.createElement("div"); div.classList.add("modal-content"); div.innerHTML = `a bunch of other things`; let button = document.createElement("button"); button.innerText = 'Submit'; button.addEventListener("click", () => this.submit()); div.appendChild(button); return div; } submit () { console.log('submitted!') } }

Answer 2

You have to access it with an arrow function to make it work completely correctly:

<button onClick={() => this.submit()}>Submit</button>