引数付きイベント関数

Reactでは、イベントハンドラに引数を渡す際に無名関数（アロー関数）を使うのが基本です。このドキュメントでは、TypeScript（TSX）環境における「引数付き関数の呼び出し」パターンを解説します。

1. 無名関数で引数を渡す基本形

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

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

✅ onClick={() => 関数(引数)} のように無名関数でラップすることで、関数を即時実行せずに引数付きで呼び出せます。

2. イベントオブジェクトと引数を両方使う

const handleClick = (e: React.MouseEvent
<HTMLButtonElement>, id: number) => {
  e.preventDefault();
  console.log(`クリックされたID: ${id}`);
};

const App = () => {
  return <button onClick={(e) => handleClick(e, 42)}>詳細</button>;
};

🧠 Reactのイベント（SyntheticEvent）は第1引数に自動的に渡されるので、それ以降の引数は手動で追加する必要があります。

3. 配列やオブジェクトを引数として渡す

type User = {
  id: number;
  name: string;
};

const handleUserClick = (user: User) => {
  console.log(`選択されたユーザー: ${user.name}`);
};

const App = () => {
  const user = { id: 1, name: "Hanako" };

  return <button onClick={() => handleUserClick(user)}>ユーザー表示</button>;
};

• 配列やオブジェクトなど、任意のデータ型を引数として渡すことができます。

4. ループ内で引数付きイベントを渡す

const handleSelect = (id: number) => {
  console.log(`選択ID: ${id}`);
};

const App = () => {
  const items = [1, 2, 3];

  return (

<ul>
      {items.map((id) => (
        <li key={id}>
          <button onClick={() => handleSelect(id)}>選択{id}</button>
        </li>
      ))}
    </ul>
  );
};

• mapなどのループ内では、無名関数を用いて値をバインドするのが一般的です。
• idが変更されても都度正しい値を使って関数を呼べるのが利点です。