React学習ログ #4｜イベントハンドラ

前回：React学習ログ #3｜データの表示・条件判定・リストのレンダー

イベントに応答する

チュートリアルリンク

コンポーネントの中でイベントハンドラ関数を宣言をしてみます。

src/App.jsx

import './App.css'

// ボタン用コンポーネント
function MyButton() {
  // アラート用コンポーネント
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

export default function App() {
  return (
    <div>
      <MyButton />
    </div>
  );
}

解説

• handleClickというアラートを出すコンポーネントをMyButton内に定義します
• MyButtonはボタンのコンポーネントで、用意しているボタンにはonClickでhandleClickを設定しています
• AppではMyButtonを呼び出しています

実際の画面の動き

次回

画面の更新を行います。
React学習ログ #5｜画面の更新