← React.js learning pathReact.js · Module 5 of 10
Handling events and forms
Respond to clicks and typing, and build controlled forms.
📖 Key ideas
- Events use camelCase: onClick, onChange, onSubmit.
- Pass a function: onClick={handleClick}, not handleClick().
- Controlled input: value={name} onChange={e => setName(e.target.value)}.
- Call e.preventDefault() in onSubmit to stop page reload.
- Validate input before sending it anywhere.
💡 Real-life example: A controlled input is a puppet: React holds the strings (state), so the input always shows what React says.
onClickRuns on a click
onChangeRuns when input changes
Controlled inputInput whose value comes from state
preventDefaultStops the form from reloading the page