PART-18

Events And Event

Handling
REACT
PRESENTER: MOHAMMAD ADIL
Objectives REACT

• What are Events?

• What is Event Handler & Event Handling?
• Event Handling With Functional Component.
• Event Handling With Class Component.
• Passing Arguments To Event Handler.
• Passing Props As Arguments To Event Handler.
What is an Event ? REACT

Event
Button Click Event Handling

dblclick
{
mouseover Line no 1
Event Handler
mouseout Line no 2
Line no 3
Page load
}
What is an Event ? REACT

• Events are actions or occurrences that happen in the system you are
programming, which the system tells you about so your code can react
to them.
• Most often user of a website generates events.
React Events REACT

• Just like HTML DOM events, React can perform actions based on user
events.
• React has the same events as HTML: click, change, mouseover etc.
Adding Events REACT

• React events are written in camelCase syntax:

• onClick instead of onclick.
• React event handlers are written inside curly braces:
• onClick={shoot} instead of onClick="shoot()".
Passing Arguments REACT

• To pass an argument to an event handler, use an arrow function.