JavaScript/React/イベント処理/カリー化を使ったイベントハンドラー関数のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
JavaScript/React/イベント処理/カリー化を使ったイベントハンドラー関数へ行く。
- 1 (2022-10-17 (月) 21:47:09)

カリー化を使ったイベントハンドラー関数

 export default function App() {
   const items = [{ id: 1, val: 'A' }, { id: 2, val: 'B' }, { id: 3, val: 'C' }];
   const handleClick = (item) => (e) => {
     console.log(item.val);
   }
   return (
     <div>
       {items.map((item) => {
         return (<div><button onClick={handleClick(item)}>ID: {item.id}</button></div>);
       })}
 
     </div>
   );
 }