preventDefault Preventing Default Behavior
Last updated: 2026-11-02
preventDefault Preventing Default Behavior
e.preventDefault() stops the browser's default action for an event, most famously the full page reload caused by submitting a form. React forms almost always call it first inside onSubmit and then handle the data through controlled state, which gives you a submission without a page refresh. It is a one-line call, but forgetting it is one of the most common React form bugs.
| Group | Rendering & State |
|---|---|
| Kind | API |
| 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
function handleSubmit(e) {
e.preventDefault() // Stops the browser's default action (such as reloading the page)
// Handle the submission with state here
}
<form onSubmit={handleSubmit}>⚙️ Parameters
| e (event object) | The React synthetic event; preventDefault can only be called while the handler runs synchronously, so it cannot be stored and called later. |
|---|
Returns：No return value (undefined); after the call the browser's default action for that event no longer happens.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
A search form: type a keyword and click "Search" and the page does not reload, while "Searched: xxx" appears below; submitting an empty value asks for a keyword instead — the default full page reload is successfully prevented.💡 Key Points
🏷️ More Rendering & State
💡 Related Cases
📚 Related Tutorials
❓ FAQ
