onClickで関数を呼び出す

4日 ago

user

1 minute

Reactでは、onClick イベントを使用して、ボタンや他の要素がクリックされたときに関数を実行することができます。

このドキュメントでは、TypeScript（TSX）を用いたクリックイベント処理の基本を解説します。

1. シンプルな関数呼び出し

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

const App = () => {
  return <button onClick={handleClick}>クリック</button>;
};

onClick={関数名} の形式で、イベント発生時に関数を実行できます。
関数を直接渡すのがポイントです。

2. 無名関数でパラメータ付きの関数を呼び出す

const greet = (name: string) => {
  alert(`こんにちは、${name}さん！`);
};

const App = () => {
  return <button onClick={() => greet("Taro")}>挨拶</button>;
};

✅ onClick={() => 関数()} のように無名関数を使うことで引数を渡すことができます。

3. イベントオブジェクトを受け取る

Reactのイベント（SyntheticEvent）を処理する場合：

const handleClick = (e: React.MouseEvent
<HTMLButtonElement>) => {
  console.log("クリック位置:", e.clientX, e.clientY);
};

const App = () => {
  return <button onClick={handleClick}>座標を確認</button>;
};

React.MouseEvent<要素の型> でイベント型を指定できます。
イベントオブジェクトは第1引数として自動的に渡されます。

4. 親から渡された関数を呼び出す

子コンポーネントでクリックイベントから親の関数を呼び出す方法：


type Props = {
  onClick: () => void;
};

const ChildButton = ({ onClick }: Props) => {
  return <button onClick={onClick