Preventing Default Actions in Event Handlers
In React, browser-based events often come with default behaviors. For instance, a form submission reloads the page by default. To prevent this, we can use the event.preventDefault() method.
Consider a form submission event:
class Form extends React.Component {
handleSubmit(event) {
event.preventDefault();
// handle logic here
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<button type="submit">Submit</button>
</form>
)
}
}
In the example above, event.preventDefault() stops the default browser behavior of reloading the page on form submission. Instead, the handleSubmit function is executed.
Remember, not all event handlers have default actions. For those that do, event.preventDefault() can be a useful tool to control the behavior of your React app.
Explore more articles
Keep experimenting and happy coding! You can find me at @samuellawrentz on X.