ReactJS Events

The way of handling the event is very much similar, to the way an event is handled in JavaScript. The major difference is that we pass a function as the event handler, rather than a string in JSX, and camel casing is used for naming the events in place of regular function names written in small alphabets. 

Another minor difference exists in the syntax,

<button onClick={this.doSomething()}>
Do Something
</button>

is written as

<button onClick={this.doSomething}>
Do Something
</button>

Generally, we don’t require to call addEventListener to add listeners to a DOM element after it is created, rather we can provide a listener when the element is initially rendered.

class Mybutton extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state={
      message:"Default message"
    };
// This binding is necessary to make `this` work in the callback
    this.doSomething=this.doSomething.bind(this);
  }
  doSomething()
  {
    this.setState({
      message:"updated message"
    });
  }
  render()
  {
    return <div><button class="myButton" onClick={this.doSomething}>
            Do Something</button><hr/>
            <label>{this.state.message}</label></div>;
    
  }
}

ReactDOM.render(<Mybutton />,document.getElementById('root'));

One more important thing to note about event handlers is that they cannot return false to prevent the default behaviour. It means we must call preventDefault() additionally. For example, the code written below is not useful,

<a href="#" onclick="console.log('Test link is clicked'); return false">
  test link
</a>

We can write the following code to prevent default link behaviour of opening a new page, such as

function preventLink() {
  function handleClick(event) {
    event.preventDefault();
    console.log('Test link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Test Link
    </a>
  );
}

Passing arguments to the event handlers

Some event handlers may also require to have some arguments. In React, an extra argument can be passed to the event handler.

class Mypanel extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state={num:0};
  }
  add(a,b)
  {
    this.setState({num:(a+b)});
  }

  render()
  {
    return <div><hr/>
            <button onClick={this.add.bind(this,10,13)}>Add</button>
            {this.state.num}
            </div>;
  }
}
ReactDOM.render(<Mypanel />,document.getElementById('root'));

The same can also be done as,

class Mypanel extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state={num:0};
  }
  add(a,b)
  {
    this.setState({num:(a+b)});
  }

  render()
  {
    return <div><hr/>
            <button onClick={(e)=>this.add(10,13,e)}>Add</button>
            {this.state.num}
            </div>;
  }
}
ReactDOM.render(<Mypanel />,document.getElementById('root'));

The above two codes are equivalent and use arrow functions and Function.prototype.bind respectively.

Here e is the React event that is passed to the arrow function explicitly.