Event Handling
Last updated: 2026-11-02
Event Handling Event Handling
React binds events with lower camel case onXxx props such as onClick and onChange, and the value of such a prop is a function. When the event fires, the handler usually reads the input or calls setState so the interface responds to the user's action — the basic pattern behind every interactive component. The naming convention is deliberate: DOM attributes are lowercase, React props are camel case.
| Group | Rendering & State |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
<button onClick={() => setCount(count + 1)}>+1</button>
// ↑ camel case event name ↑ pass the function itself, not the result of calling it⚙️ Parameters
| onXxx (handler) | A function that receives the synthetic event object; it can be an inline arrow function or a handleXxx function defined in the component. |
|---|
Returns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The page shows a like count, three buttons, a message line and an input: "Like" bumps the number, "Show a message" prints its text, typing in the input echoes live below it, and "Reset" clears everything.💡 Key Points
⚠️ Warning onClick={fn()} runs the function while rendering and uses its return value as the handler — pass the function itself instead: onClick={fn} or () => fn().
💡 Tip Move complex handlers into the component body as named handleXxx functions; keep inline arrow functions for cases that fit on one line.
ℹ️ Info React events are synthetic events (SyntheticEvent), which unify the differences between browsers while behaving much like native events.
🏷️ More Rendering & State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How do I bind a click event in React?
A Write onClick={handler} on the element, using a camel case event name; the handler can be a function defined in the component or an inline arrow function.
Q Why does onClick have to be an arrow function?
A onClick needs a function that is called when the event happens. Writing fn() runs it immediately while rendering; writing () => fn() defers it until the click.
Q What is the difference between React events and native events?
A React uses synthetic events: camel case names, a unified wrapper around the native event object, and delegation attached at the root node, which improves both compatibility and performance.
