Event handlers

A function that deals with DOM events is called an “event handler”. Event handlers are defined as follows:

<login>
  <form onsubmit={ submit }>
  </form>
  <script>
    export default {
      // this method is called when above form is submitted
      submit(e) {
      }
    }
  </script>
</login>

Attributes beginning with “on” (onclick, onsubmit, oninput, etc.) accept a function value which is called when the event occurs. This function can also be defined dynamically with an expression. For example:

<form onsubmit={ condition ? method_a : method_b }>

All the event handlers are auto-bound and this refers to the current component instance.

So you can also call a function dynamically from a property value like this:

<button onclick={ this[props.myfunc] }>Reset</button>

Event handlers do not update components so you might combine them with a this.update() call:

<login>
  <input value={ state.val }/>
  <button onclick={ resetValue }>Reset</button>
  <script>
    export default {
      state: {
        val: 'initial value'
      },
      resetValue() {
        this.update({
          val: ''
        })
      }
    }
  </script>
</login>