React Events

⚛️ React Events

React events work similar to DOM events, but there are some key differences:

Feature HTML React
Event name lowercase camelCase
Function string function
Example onclick="doSomething()" onClick={doSomething}

 Example: Click Event (Functional Component)


 

✔ onClick is a React event
✔ Event handler must be a function

 Passing Arguments to Event Handlers


 

⚠️ Must use an arrow function to avoid auto-calling.

 Events in Class Components


 

 Using this in Class Components

You may need to bind this in older React class syntax:


 

OR use an arrow function method:


 

✔ Recommended modern approach.

 Event Object

React automatically passes the event object (like in JavaScript).


 

 Keyboard Events


 

 Form Events


 

✔ Always prevent default for form submission.

 Change Event (Input Handling)


 

🎯 Common React Events

Event Description
onClick Click event
onChange Input change
onSubmit Form submission
onMouseEnter Mouse hover
onMouseLeave Mouse leaves element
onKeyDown / onKeyUp Keyboard interaction
onInput Real-time input listener

✔ Summary

  • React events use camelCase naming

  • Handlers must be functions, not strings

  • Use arrow functions for binding and passing parameters

  • Forms require event.preventDefault() to stop page refresh

You may also like...