React Events

Just like HTML, React can perform actions based on user events. React has the same events as HTML like click, change, mouseover, etc.

Adding Events
React events are written in camelCase syntax, e.g., onClick instead of onclick. React event handlers are written inside curly braces, e.g., onClick={shoot} instead of onClick="shoot()". 

<button onClick={shoot}>Take the Shot!</button>

Bind this
For methods in React, the this keyword should represent the component that owns the method. That is why you should use arrow functions. With arrow functions, this will always represent the object that defined the arrow function. 

class Football extends React.Component {
  shoot = ( ) => {
    alert( this );
    /*
      The 'this' keyword refers to the component object.
    */
  }
  render( ) {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}
ReactDOM.render( <Football />, document.getElementById( 'root' ) );

Why Arrow Functions?
In class components, the this keyword is not defined by default, so with regular functions the this keyword represents the object that called the method, which can be the global window object, an HTML button, or whatever. If you must use regular functions instead of arrow functions you have to bind this to the component instance using the bind() method. Make this available in the shoot function by binding it in the constructor function. Without the binding, the this keyword would return undefined. 

class Football extends React.Component {
  constructor( props ) {
    super( props )
    this.shoot = this.shoot.bind( this )
  }
  shoot( ) {
    alert( this );
    /*
      Thanks to the binding in the constructor function,
      the 'this' keyword now refers to the component object.
    */
  }
  render( ) {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}
ReactDOM.render( <Football />, document.getElementById( 'root' ) );

Passing Arguments
If you want to send parameters into an event handler, you have two options:
  1. Make an anonymous arrow function.
  2. Bind the event handler to this.
Note that the first argument has to be this. 

class Football extends React.Component {
  shoot = (a) => {
    alert( a );
  }
  render( ) {
    return (
      <button onClick={( ) => this.shoot("Goal")}>Take the shot!</button>
    );
  }
}
ReactDOM.render( <Football />, document.getElementById( 'root' ) );

React Event Object
Event handlers have access to the React event that triggered the function. In our example the event is the click event. Notice that once again the syntax is different when using arrow functions or not. With the arrow function you have to send the event argument manually. Arrow Function: Sending the event object manually: 

class Football extends React.Component {
  shoot = ( a, b ) => {
    alert( b.type );
    /*
      'b' represents the React event that triggered the function,
      in this case the 'click' event
    */
  }
  render( ) {
    return (
      <button onClick={(ev) => this.shoot("Goal", ev)}>Take the shot!</button>
    );
  }
}
ReactDOM.render( <Football />, document.getElementById( 'root' ) );