Handling Click, Change, and Submit Events0%
Preventing Default Browser Behaviors

Handling Click, Change, and Submit Events

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Handling Click, Change, and Submit Events

1. The Core Trio of Web Events

In interactive web engineering, the vast majority of user interactions revolve around three fundamental event types:

  1. 1
    onClick: Triggered when the user clicks or taps an element (buttons, links, badges, cards).
  2. 2
    onChange: Triggered when form input values change (text inputs, checkboxes, radio buttons, dropdown selects).
  3. 3
    onSubmit: Triggered when a <form> element is submitted (via Enter key or submit button click).

Mastering how React harmonizes these three events unlocks complete control over client-side interactivity.

2. Handling Form Inputs with onChange

In standard HTML, the change event often only fires when an input loses focus (the blur event). In React, onChange fires immediately on every single keystroke or value modification.

This real-time response makes it effortless to implement Controlled Components, where input values are strictly bound to React state:

JSX
import React, { useState } from 'react';
 
export default function StudentForm() {
const [fullName, setFullName] = useState('');
const [track, setTrack] = useState('full-stack');
const [agreedToTerms, setAgreedToTerms] = useState(false);
 
return (
<div className="form-wrapper">
{/* Text Input */}
<div className="form-group">
<label>Student Name:</label>
<input
type="text"
value={fullName}
onChange={(e) => setFullName(e.target.value)}
placeholder="e.g. Deepak Kumar"
/>
</div>
 
{/* Select Dropdown */}
<div className="form-group">
<label>Course Track:</label>
<select value={track} onChange={(e) => setTrack(e.target.value)}>
<option value="full-stack">Full-Stack Web Development</option>
<option value="data-analysis">Data Analysis Mastery</option>
<option value="python">Python Engineering</option>
</select>
</div>
 
{/* Checkbox Input */}
<div className="form-group">
<label>
<input
type="checkbox"
checked={agreedToTerms}
onChange={(e) => setAgreedToTerms(e.target.checked)} // Note: e.target.checked for checkboxes
/>
I accept the laboratory code of conduct
</label>
</div>
</div>
);
}

Key Detail: For checkboxes, read e.target.checked (boolean), NOT e.target.value (string).

3. Handling Form Submissions with onSubmit

Submitting a <form> in standard HTML causes the browser to reload the entire web page and submit a GET or POST request to the action URL. In a React Single-Page Application, you intercept this behavior using e.preventDefault() inside your onSubmit handler:

JSX
import React, { useState } from 'react';
 
export default function RegistrationCard() {
const [email, setEmail] = useState('');
const [submitted, setSubmitted] = useState(false);
 
const handleSubmit = (e) => {
// 1. Stop full-page browser refresh
e.preventDefault();
 
// 2. Client-side validation
if (!email.includes('@')) {
alert('Please provide a valid email address.');
return;
}
 
// 3. Process data (e.g., transmit to backend API)
console.log('Registering student:', email);
setSubmitted(true);
};
 
return (
<form onSubmit={handleSubmit} className="card-form">
<h3>Newsletter & Lab Access</h3>
<input
type="email"
placeholder="Enter email..."
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
 
<button type="submit">Subscribe</button>
 
{submitted && <p className="success-msg">Thank you for enrolling!</p>}
</form>
);
}
Interactive Quiz

Practice Quiz

Question 1
In React, when does the onChange event fire for a text input?
Question 2
For a checkbox element (<input type="checkbox" />), which property of e.target holds its checked status?
Question 3
Why is attaching onSubmit to the <form> element preferred over attaching onClick to the submit button?
Question 4
What must be invoked inside the onSubmit handler to prevent the browser from reloading the page?
Question 5
What is a "Controlled Component" in React form architecture?
Next Lesson

Preventing Default Browser Behaviors

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Passing Arguments to Event HandlersPreventing Default Browser Behaviors

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext