イベントハンドラ
クリックに反応させる
ボタンを押したときに何かをしたい。React ではその「何か」を関数にして、要素に渡します。この関数を イベントハンドラ と呼びます。操作が起きたときに呼ばれる関数、という意味です。
JavaScript (JSX)
export default function App() {
function handleClick() {
console.log("押されました");
}
return <button onClick={handleClick}>いいね</button>;
}onClick の値は波かっこで囲みます。中に書くのは関数そのものです。文字列ではありません。HTML の onclick="doSomething()" とは形が違うので、ここで一度書き方を切り替えてください。
渡すのは関数、呼ぶのは React
書きはじめた人がほぼ全員一度はやる間違いが、次の書き方です。
JavaScript (JSX)
// 動きません
<button onClick={handleClick()}>いいね</button>handleClick() とかっこを付けると、その場で関数を呼んだ 結果 が onClick に入ります。結果はたいてい undefined なので、押しても何も起きません。それどころか、画面が描かれるたびに関数が走ります。中で state を更新していれば、更新が描き直しを呼び、描き直しがまた更新を呼び、止まらなくなります。
正しいのは handleClick です。かっこを付けません。呼ぶ役目は React が引き受けます。
引数を渡したいとき
かっこを付けられないなら、引数はどう渡すのか。アロー関数で包みます。
JavaScript (JSX)
<button onClick={() => addLike(3)}>3 増やす</button>こう書くと onClick に入るのは () => addLike(3) という関数です。押されたときにはじめて中の addLike(3) が走ります。かっこを付けたい気持ちは、この形で満たしてください。
onClick 以外も同じ規則
入力欄の onChange、フォームの onSubmit、マウスが乗ったときの onMouseEnter。どれも同じで、名前は先頭が小文字のキャメルケース、値は関数です。この章では onChange と onSubmit を続けて使っていきます。
つまずきどころ
onclickと全部小文字で書くと React が認識しません。onClickです- 引数なしなら
onClick={handleClick}、引数ありならonClick={() => handleClick(値)} - ハンドラの関数はコンポーネントの中に書きます。中に書くから state を触れます
演習
いいね数を操作する 3 つのボタンに、ハンドラを付けます。