イベントに反応する ― onClick

導入

まずはクリックに反応するところから。JSX ではボタンに onClick を書いて、押されたときに動く関数を渡します。

説明

onClick に渡した関数が、クリックのたびに呼ばれます。

function App() {
  function handleClick() {
    console.log("ボタンが押されました");
  }
  return (
    <div>
      <p>下のボタンを押すと、下のコンソールにログが出ます。</p>
      <button onClick={handleClick}>押す</button>
    </div>
  );
}

• onClick={handleClick} … 関数そのものを渡します（handleClick() と呼び出してはいけません。それだと描画時に即実行されてしまいます）。
• その場で書く短い処理はアロー関数で onClick={() => console.log("hi")} とも書けます。
• console.log の出力は、プレビュー下の「コンソール」欄に表示されます。

やってみよう

ボタンをもう1つ足して、それぞれ違うメッセージを console.log するようにしてみましょう。