PART-19

Binding Event
Handlers
REACT
PRESENTER: MOHAMMAD ADIL
Pre-Requisites REACT

• This Keyword In JavaScript

• Constructor In React
• Super Keyword In JavaScript
• State In React
• Event Handling In React
Binding Event Handlers REACT

• In ReactJS, we need to bind events so that the this keyword would not
return an “undefined“.
Binding Event Handler in Render
Method REACT

• We can bind the handler when it is called in the render method using
bind() method.
• <button onClick={this.clickHandler.bind(this)} >Click</button>
Binding Event Handler in the
Constructor REACT

• In this approach, we are going to bind the event handler inside the
constructor. This is also the approach that is mentioned in ReactJS
documentation.
• This has performance benefits as the events aren’t binding every time
the method is called.
Binding Event Handler using Arrow
Function REACT

• This is probably the best way to bind the events and still pass in
parameters to the event handlers easily.
• By using this way you don’t need to bind “this” keyword.
What is binding event handlers in
React? REACT

• Event Binding tells the browser that this function should be called
whenever this event is triggered or in other words whenever the event
is trigged the function which is bind with the event should be called.
• Bind creates a new function that will have this set to the first
parameter passed to bind() .