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
