【React】react-draggableのドラッグ時動く関数内でデフォルトの引数を使いつつ、任意の渡したい変数も渡せる書き方がわからない。

Question

やりたいこと

12種の画像をドラッグアンドドロップで動かせるようにすることです。その各画像の位置を状態として保存することで、コンポーネントが再描画されても動かした位置に画像があるようにしたいです。
各画像は色が違うのでcolorという変数で識別しています。

困っていること

画像のドラッグ時に動く関数に、デフォルトで渡ってくる引数を保持したまま渡したい変数（color）を渡せないことです（それにより、どの画像を動かしているかの情報を判別できず、上記「やりたいこと」の実現ができないです）。

自分の中での既知の方法で渡したい変数（color）を引数として指定すると、ドラッグ時に働くonDragオプションでデフォルトで渡せるはずのeとdataが渡せなくなってしまいます。そこで今度はcolorを指定しないと、当たり前ですが、colorが情報として渡ってきません…。

おそらくJavaScriptの仕様の理解の部分だと思うのですが…検索力等足りずに質問に至りました。

コードは下記「コード」、ドラッグアンドドロップで使っているライブラリ「react-draggable」は下記「参考文献」よりご確認いただけます。

教えていただきたいこと

1. ドラッグ時に動くhandleDrag()にどの画像を操作しているかの情報であるcolorを渡しつつ、デフォルトで入ってくるeとdataも受け取れるような書き方。
2. もしくは、根本的にやりかたが間違っている場合はそのご指摘と正攻法。

主な利用技術・環境

  "dependencies": {
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-draggable": "^4.4.3",
  },

コード

Map.jsx

// インポート等、省略

  const playerColorImageList = {
      red: Red,
      // 中略
      lime: Lime
    };

  const playerColorList = Object.keys(playerColorImageList);

  const [playerIconPosition, setPlayerIconPosition] = React.useState({
    red: {
      x: 0,
      y: 0,
    },
    // 中略
    lime: {
      x: 0,
      y: 0,
    },
  });
    
   // この関数でcolorとdataを使いたいが、両方利用できるような書き方がわからない。
    const handleDrag = (e, data, color) => {

    console.log('start');
    console.log(e);
    console.log(data);
    // console.log(color);
    console.log('end');

    // setPlayerIconPosition({...playerIconPosition,
    //   [color]: {
    //     x: data.x,
    //     y: data.y,
    //   }
    // });


  };

  const playersIcon = playerColorList.map((color) => 
    
    <Grid item xs={1}>  
      <Draggable
        position={playerIconPosition[color]}
        onDrag={handleDrag} // 記述①
       // onDrag={handleDrag(color)}  記述②
      >
        <img src={playerColorImageList[color]} className={classes.img}/>
      </Draggable>    
    </Grid>
    );


  return (

  <Grid container xs={12} alignItems="center" justify="center">
    {playersIcon}
  </Grid>          

  );

動作

記述①のときのコンソールの一部

start Map.jsx:124
TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
 Map.jsx:125
{node: img.Map-img-66.react-draggable.react-draggable-dragging.react-draggable-dragged, x: 44.56512451171875, y: -33.11798095703125, deltaX: 1.40960693359375, deltaY: -0.83770751953125, …} Map.jsx:126
end Map.jsx:127

dataとeは取得できますが、colorを取得できません。

記述②のときのコンソールの一部

start Map.jsx:124
red Map.jsx:125
undefined Map.jsx:126
end Map.jsx:127

今後は変数eにcolorの値が入ってきてしまい、こちらも値を取りたいように取れません。

参考文献

1. react-draggable

用語等の把握不足で分かりづらい説明になっているかとおもわれます。申し訳ありません。
ご教授お願い申し上げます。

Answer 1

別サイトにて回答を得られましたので、そちらを掲載させていただきます。

react-draggableのドラッグ時動く関数内でデフォルトの引数を使いつつ、任意の渡したい変数も渡せる書き方がわからない。