イベント クリックに反応する

ここまで作ってきた画面は、きれいに表示されますが、触っても何も起きません。ボタンを押したら何かが起きる——ユーザーの操作に反応する仕組みがイベントです。この章と次の章はセットで、この教材の心臓部になります。

onClickに「関数を」渡す

const ClickButton = () => {
  const handleClick = () => {
    alert("クリックされました");
  };

  return <button onClick={handleClick}>押してみて</button>;
};

分解します。まず、押されたときにやりたいことを関数として用意します(handleClick)。そして、buttonタグの onClick 属性に、{ } の窓でその関数を渡します。「このボタンが押されたら、この機械を動かして」と、Reactに機械ごと預けるイメージです。

属性名は onClick——小文字のcではなく大文字のCです。HTMLのonclickと違い、JSXのイベント属性はキャメルケース(onClick、onChange、onSubmit)。チャプター7の翻訳ルールの追加分として覚えてください。

関数の名前は handle〜(handleClick、handleDelete)とするのが実務の定番です。「〜されたときの処理係」と読めるからです。

最重要のワナ: 渡すのであって、呼ぶのではない

ここで、React初心者のほぼ全員が一度は踏むワナを紹介します。