An event target is the DOM node where a browser event occurred or to which it was dispatched. In a React handler, event.target identifies that node. section 8.2.2 section 8.2.3
Use the target when one handler serves several interactive elements:
- Compare event.target with a ref to determine which button caused the event. section 8.2.2
- Read event.type when the same handler responds to different event kinds. section 8.2.2
- Use common event methods such as preventDefault() and stopPropagation() when needed. section 8.2.3
Listing 8.4 Increment and decrement with a single event handler
import { useState, useRef } from "react";
function Counter() {
const [counter, setCounter] = useState(0);
const increment = useRef(); #1
const onClick = (evt) => {
const delta = #2
evt.target === increment.current ? 1 : -1; #2
setCounter((value) => value + delta); #3
};
return (
<section>
<h1>Value: {counter}</h1>
<button ref={increment} onClick={onClick}> #4
Increment
</button>
<button onClick={onClick}>Decrement</button> #4
</section>
);
}
function App() {
return <Counter />;
}
export default App;
Inspect a counter that uses one onClick handler for both increment and decrement buttons, selecting the action through event.target. section 8.2.2
