Events and handlers
React uses camelCase event names (onClick, onChange). You pass a function that gets called when the event happens. Here we simulate: a function that would be the click handler and we call it to show the idea.
Appy Says…
Clicks, key presses, form submissions — these are events. In React, every user interaction is handled with event handler props. Learn this and your components go from static displays to live, responsive interfaces.
What are React Events?
React wraps native browser events in SyntheticEvents — a cross-browser consistent API. You attach handlers as props using camelCase names.
- •
onClick,onChange,onSubmit,onKeyDown,onFocus,onBlur - •Pass a function:
<button onClick={handleClick}> - •Inline arrow:
<button onClick={() => setCount(c => c + 1)}> - •Event object:
(e) => console.log(e.target.value) - •
e.preventDefault()— stop default browser behaviour (form submit, link navigate) - •
e.stopPropagation()— stop the event bubbling to parent elements
Think of it like Roblox RemoteEvent listeners
In Roblox, you connect functions to events: part.Touched:Connect(function() ... end). React event handlers work the same — define what happens when an event fires, and React connects it for you.
How It Works
- •1. Define a handler:
function handleClick(e) { console.log('clicked'); } - •2. Attach:
<button onClick={handleClick}>Click</button> - •3. For form inputs:
<input onChange={e => setValue(e.target.value)} /> - •4. For forms:
<form onSubmit={e => { e.preventDefault(); submitData(); }}> - •5. Pass arguments:
onClick={() => handleDelete(item.id)} - •6. React uses event delegation — one listener at the root, not one per element
Real-World Examples
- •Like button:
<button onClick={() => setLiked(!liked)}> - •Search input:
<input onChange={e => setQuery(e.target.value)} /> - •Keyboard shortcut:
<div onKeyDown={e => e.key === 'Escape' && closeModal()}> - •Drag to reorder:
onDragStart,onDragOver,onDropevents
Key Facts
- •React uses SyntheticEvent — a cross-browser wrapper that normalises event APIs
- •React attaches ONE event listener to the root DOM node, not per element (efficient)
- •Event handlers in React are not called in the capture phase by default — add
Capturesuffix:onClickCapture - •Passing
onClick={handleClick()}(with parentheses) calls it IMMEDIATELY on render — don't do this
Watch Out!
Don't call the handler when passing it: onClick={handleClick()} runs immediately on every render. Correct: onClick={handleClick} (reference) or onClick={() => handleClick(arg)} (arrow wrapping a call with arguments).
Remember
Pass handler references: onClick={fn}. For calls with args: onClick={() => fn(arg)}. Use e.preventDefault() on form submit. Use e.target.value to read input values.
What You Learned
- •React events: camelCase props (
onClick,onChange) with handler functions - •e.preventDefault() stops defaults; e.target.value reads input values
- •Unlocks: buttons, forms, keyboard shortcuts, drag-and-drop — all interactivity
Key Facts
- →React uses SyntheticEvent — a cross-browser wrapper that normalises event APIs
- →React attaches ONE event listener to the root DOM node, not per element (efficient)
- →Event handlers in React are not called in the capture phase by default — add
Capturesuffix:onClickCapture - →Passing
onClick={handleClick()}(with parentheses) calls it IMMEDIATELY on render — don't do this
Real-World Examples
Remember
Pass handler references: onClick={fn}. For calls with args: onClick={() => fn(arg)}. Use e.preventDefault() on form submit. Use e.target.value to read input values.
Quick Quiz
What is the click handler prop called in React?