在事件處理器中帶入參數
在事件處理器中（event handler）中若有需要帶入參數有幾種不同的做法。
基本用法#
在 onClick 中建立函式
function App() {
const [counter, setCounter] = useState(5);
const handleClick = (type) => {
if (type === 'increase') {
setCounter(counter + 1);
} else if (type === 'decrease') {
setCounter(counter - 1);
}
};
return (
<div className="container">
<div
className="chevron chevron-up"
onClick={() => handleClick('increase')}
></div>
<div className="number">{counter}</div>
<div
className="chevron chevron-down"
onClick={() => handleClick('decrease')}
></div>
</div>
);
}
讓函式回傳函式：寫法一#
function App() {
const [counter, setCounter] = useState(5);
const handleClick = (type) => {
return () => {
if (type === 'increase') {
setCounter(counter + 1);
} else if (type === 'decrease') {
setCounter(counter - 1);
}
};
};
return (
<div className="container">
<div
className="chevron chevron-up"
onClick={handleClick('increase')}
></div>
<div className="number">{counter}</div>
<div
className="chevron chevron-down"
onClick={handleClick('decrease')}
></div>
</div>
);
}
讓函式回傳函式：寫法二#
function App() {
const [counter, setCounter] = useState(5);
const handleClick = (type) => () => {
if (type === 'increase') {
setCounter(counter + 1);
} else if (type === 'decrease') {
setCounter(counter - 1);
}
};
return (
<div className="container">
<div
className="chevron chevron-up"
onClick={handleClick('increase')}
></div>
<div className="number">{counter}</div>
<div
className="chevron chevron-down"
onClick={handleClick('decrease')}
></div>
</div>
);
}
想想看！在帶入參數的同時又想要取得事件（e）可以怎麼寫？#
function App() {
const [counter, setCounter] = useState(5);
const handleClick = (type) => (e) => {
console.log('e.target', e.target);
if (type === 'increase') {
setCounter(counter + 1);
} else if (type === 'decrease') {
setCounter(counter - 1);
}
};
return (
<div className="container">
<div
className="chevron chevron-up"
onClick={handleClick('increase')}
></div>
<div className="number">{counter}</div>
<div
className="chevron chevron-down"
onClick={handleClick('decrease')}
></div>
</div>
);
}