Reactでクリックイベントを実装する方法

React

Reactでクリックイベントを実装する方法

Reactでクリックイベントを実装する方法をTypeScriptで説明します。
以下は簡単なクリックイベントハンドラを持つコンポーネントの例です。

import React, { FC } from 'react';

const ClickButton: FC = () => {
  const handleClick = () => {
    alert('ボタンがクリックされました！');
  };

  return (
    <button onClick={handleClick}>
      クリックして下さい
    </button>
  );
};

export default ClickButton;

このコードでは、ClickButtonコンポーネントがクリックされるとhandleClick関数が呼び出され、アラートメッセージが表示されます。
特に外部ライブラリのインストールは不要です。

詳細説明

import React, { FC } from 'react';
ReactとFunctional Component（FC）の型をインポートします。

const handleClick = () => { ... };
クリックイベントハンドラを定義します。
この関数はボタンがクリックされたときに実行されます。


ボタン要素を返し、クリックイベントハンドラをonClickプロパティに設定します。

このようにして、TypeScriptを使用してReactでクリックイベントを簡単に実装することができます。

引数があるパターン

引数があるパターンのクリックイベントハンドラを実装する例を示します。
以下の例では、クリックイベントハンドラに引数を渡す方法を説明します。

import React, { FC } from 'react';

interface ButtonProps {
  message: string;
}

const ClickButton: FC<ButtonProps> = ({ message }) => {
  const handleClick = (msg: string) => {
    alert(msg);
  };

  return (
    <button onClick={() => handleClick(message)}>
      クリックして下さい
    </button>
  );
};

export default ClickButton;

詳細説明

interface ButtonProps { message: string; }
ボタンコンポーネントに渡されるプロパティの型を定義します。
この場合、messageという文字列のプロパティを持ちます。

const ClickButton: FC = ({ message }) => { ... }
Functional Componentの型をButtonPropsに設定し、プロパティとしてmessageを受け取ります。

const handleClick = (msg: string) => { ... };
クリックイベントハンドラを定義します。
この関数は引数としてメッセージを受け取ります。

onClick={() => handleClick(message)}> ...
ボタン要素を返し、クリックイベントハンドラをonClickプロパティに設定します。
この場合、handleClick関数にmessageプロパティの値を渡します。

これにより、ボタンがクリックされたときに、プロパティとして渡されたメッセージを表示することができます。