チーム種目-命名4 mation選手

前回

前回1番で選んだ選手が2番丸でミスをしました
円ごとにハンドルを作り、外挂けも间违いました.
だから何が問題なのか分からないで、一人であれこれを触って、原因を知っています!
前に作成したポップアップメニューは私が作成したものではないので、ドラッグ&ドロップとmenuはセットだと思います.
なので2番丸を作るときも、ドラッグ&ドロップとmenuコピーを入れました.
しかし、私はコンソールで2番の円の下のHandlerだけが働いていることを確認して、私はできないと思います.だから、メニューのラベルを注釈しました.
でもすべての円にメニューがあります
元々はメニューが1つしかなかったのですが、2番目に書かれたメニューラベルが最新なのでそれだけ実行しました.

インプリメンテーション

だからメニューラベルを1つだけ作りました.
しかし問題が発生しました
これがセットだと思ったので、各円のメニューラベルに各円のnameハンドルを掛けたいです.
これでは、どの円の上で選択したのか分からない
メニューラベルはドラッグ可能なサブラベルではなく、そのまま同じ行にあるラベルなので、円の情報はわかりません
深い苦悩に陥る
どうすればこの困難を解決できますか.
そして円の情報がわかるドラッグ可能な中にどんなラベルがあるかを見て、buttonラベルがあることに気づきました.
そのボタンラベルにhandleClickでポップアップウィンドウが見つかりました

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
    event.preventDefault();//브라우저 우클릭을 막아준다.
  };

これを見た瞬間はちょっとキラキラ!ふと思い出した
ボタンステータスを作成し、ステータスに保存し、ハンドルをクリックすると、どの円にクリックされますか.
ボタンをクリックするとすぐにstateに保存されます.
onClickアクティビティは、メニュー項目をクリックしたときに実行されるアクティビティです
onNameHandlerという名前の状態修正ハンドルを作成し、switchを使用してボタンの状態を基準に比較します.
そしてボタンの状態にあるNameのstateを変更させておけば良いのでしょうか?と思う

  const [buttonNum, setbuttonNum] = useState()
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
    setbuttonNum(event.currentTarget.id)
    event.preventDefault();//브라우저 우클릭을 막아준다.
  };

  const onNameHandler = ({id, name, already}) => {
    switch(buttonNum){
      case "button1" :
        return SetName1(name)
      case "button2" :
        return SetName2(name)
      case "button3" :
        return SetName3(name)
      case "button4" :
        return SetName4(name)
      case "button5" :
        return SetName5(name)
      case "button6" :
        return SetName6(name)
      case "button7" :
        return SetName7(name)
      case "button8" :
        return SetName8(name)
      case "button9" :
        return SetName9(name)
      case "button10" :
        return SetName10(name)  
      case "button11" :
        return SetName11(name)  
    }
  }
  ------------------------------------------------------
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
        PaperProps={{
          style: {
            maxHeight: "200px",
            width: '20ch',
          },
        }}
      //스크롤 만드는것
      >
        {playerList.map((player, idx) => {
          if(player.already === false){
            return (
              <MenuItem 
                onClick={() => {
                  handleClose(player)
                  onNameHandler(player) // 이름 변경하는 핸들러
                }}
                key={idx}
              >
                {player.name}
              </MenuItem>
            )
          }
        })}
      </Menu>

      <Draggable 
        disabled={Status} 
        defaultPosition={{x: 145, y: 80}}
        onDrag = {(e, data) => onDragHandler1(data)}
        bounds = {{top: 0, left: 0, right: 520, bottom: 740}}
        // onStop={(e, data) => trackPos(data)}
        // 포지션 위치 값 보내는 방법
      >
        {/* <div className="move">
          <div>{Content1}</div>
        </div> */}
        <div className="move">
          <Button className="button"
            disabled={Status}
            id="button1"
            aria-controls={open ? 'basic-menu' : undefined}
            aria-haspopup="true"
            aria-expanded={open ? 'true' : undefined}
            onContextMenu={(e) => handleClick(e)} // 원안에서 우클릭으로 팝업을 띄우는 버튼
          >
            <div>{Content1}</div>
          </Button>
          <div>{Name1}</div>
        </div>

      </Draggable>

右クリックでポップアップすると、ボタンのid値がstateに保存され、リストから直線が選択されます.
選ばれた選手はpropsでonNameHandlerに入り、そこでnameを抜き、switchで現在のボタンに従います
SetNameで
これにより、各円に選択した値が各円に表示されます!!!

今残っているのは1番の選手を選んで3番を選んだら、もう1番をこのリストに載せるだけです!