React
Handling Events
React event handlers are camelCase props, onClick,
onChange, onSubmit, set to a function that
runs whenever that event fires.
Example: reading what's typed into a field
import { useState } from "react";
function SearchBox() {
const [query, setQuery] = useState("");
function handleChange(e) {
setQuery(e.target.value);
}
return (
<div>
<input type="text" onChange={handleChange} placeholder="Search..." />
<p>You typed: {query}</p>
</div>
);
}e (the event object) is passed automatically to every
handler; e.target is the actual DOM element the event
happened on, and .value is its current text. Notice this
example pairs the event handler with useState from the
previous lesson, reading input and storing it in state together is
exactly the pattern behind essentially every form in a real React app.
function SearchBox() {
function handleChange(e) {
console.log("You typed:", e.target.value);
}
return <input type="text" onChange={handleChange} placeholder="Search..." />;
}Logs "You typed: <current value>" to the console every time the input changes.