Handle a button click
A handler runs when an event occurs. In React, assign the function to an event property on a JSX element: const [counter, setCounter] = useState(0); const onClick = () => setCounter(value => value + 1); return <button onClick={onClick}>Increment: {counter}</button>; Pass the function as onClick; the click triggers the state update. section 8.1.1
An event reports an interaction or change. A button can dispatch a click event when activated by mouse, touch, or keyboard; a form control’s change event reports a changed value. Other events can report mouse movement, form submission, or a video starting to play. React connects supported events to handlers through JSX properties such as onClick, onChange, and onPlay. section 8.0 section 8.1.1
React calls a handler with an event object. Use it to identify the event and its target, inspect its propagation phase, or prevent a browser default action. For example, preventing the default action of a link click stops navigation. Events travel through ancestor elements during capture, reach the target, then travel back during bubbling; a listener’s phase determines when it runs. section 8.11 section 8.4.3
Prefer JSX event properties for supported events: React manages those listeners as components mount and unmount. Use a manually attached JavaScript listener when the target is outside React’s control, such as window or document, or when React does not support the event type. A manual listener also needs manual removal. section 8.1 section 8.8
