問題一覧に戻る
初級Props
問題17: イベントハンドラーのProps

関数をPropsとして渡すことで、子コンポーネントから親コンポーネントへの通信が可能になります。イベントハンドラーの渡し方と呼び出し方を学びます。

// 子コンポーネント
function Button({ text,  }) {
  return (
    // 受け取った関数を呼び出す
    <button ={}>
      {text}
    </button>
  );
}

// 親コンポーネント
function App() {
  // イベントハンドラー関数
  const handleClick = () => {
    alert("ボタンがクリックされました！");
  };

  return (
    <div>
      {/* 関数をpropsとして渡す */}
      <Button 
        text="クリック" 
        ={handleClick}
      />
    </div>
  );
}

export default App;
···