問題一覧に戻る
初級イベント処理
問題33: イベントハンドラーに引数を渡す

アロー関数を使ってイベントハンドラーに引数を渡す方法を学びます。パラメータ付きハンドラーの実装パターンを理解しましょう。

import React from 'react';

function ItemList() {
  const items = ["A", "B", "C"];

  // 削除ハンドラー
  const handleDelete = () => {
    alert(`削除: ${item}`);
  };

  return (
    <div>
      {items.map((item) => (
        <div key={item}>
          {item}
          {/* 引数を渡す */}
          <button onClick={ => (item)}>
            ×
          </button>
        </div>
      ))}
    </div>
  );
}

export default ItemList;
···