如何從菜單中的 MenuItem 獲取 id

Question

帶菜單的表 Ui

所有用戶的編輯按鈕僅獲取最后一個用戶 ID

如果它沒有嵌套在菜單中，它會工作，只是顯示為一個編輯按鈕，但只要它嵌套在菜單中，它只會獲取用戶的最后一個 ID

這是代碼

  const [anchorEl, setAnchorEl] = React.useState(null);                                                                                                                
  const open = Boolean(anchorEl);
  
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

    
  const handleClose = () => {
    setAnchorEl(null);
  };

//TableCell Code

<StyledTableCell align="left">
              <Tooltip
                    title="Update and Delete"
                    id="basic-button"
                    aria-controls={open ? "basic-menu" : undefined}
                    aria-haspopup="true"
                    aria-expanded={open ? "true" : undefined}
                    onClick={handleClick}
                    value={user}
                    arrow
              >
                <MoreHorizIcon  value={user}/>
             </Tooltip>
             <Menu
                id="basic-menu"
                anchorEl={anchorEl}
                open = {open}
                onClose={handleClose}
                getContentAnchorEl={null}
                value={user}
                anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
                transformOrigin={{vertical: 'top', horizontal: 'center'}}
            >
              <MenuItem  value={user.id} onClick={()=> navigate(`/edit-users/${user.id}`)}>
                <ManageAccountsIcon sx={{ margin: "1vh" }} />
                        Edit
              </MenuItem>

              <MenuItem value={user.id} onClick={() => 
  handleDelete(user.id)}>
                <DeleteOutlineIcon sx={{ color: "red", margin: "1vh" }} />
                         Remove
               </MenuItem>                   
            </Menu>
</StyledTableCell>

菜單代碼

我想獲取同一個用戶的id

Answer 1

您可以嘗試另一種選擇用戶的方法嗎

  // use useRef if its causing to many re-renders
  const selectedUserIdRef = React.useRef()

  const handleClick = (event, userId) => {
    setAnchorEl(event.currentTarget);
    selectedUserIdRef.current = userId;
  };

  const handleClose = () => {
    setAnchorEl(null);
     selectedUserIdRef.current = null
  };

  const onNavigate = () => {
     // try catch and checks
     if (selectedUserIdRef.current) {
       navigate(`/edit-users/${selectedUserIdRef.current}`)
     }
  }
 
  const onDelete = () => {
     // try catch and checks
     if (selectedUserIdRef.current) {
      //deleted with selectedUserIdRef.current
     }
  }

  //TableCell Code
 const TableCellComponent = (props) => {

  // second option set an anchor element for cell 
  //const anchorElRef = React.userRef()

  ... 
    <Tooltip
       title="Update and Delete"
       id="basic-button"
       aria-controls={open ? "basic-menu" : undefined}
       aria-haspopup="true"
       aria-expanded={open ? "true" : undefined}
       onClick={(e) => handleClick(e, user.id)}
       value={user}
       arrow
       ref={anchorElRef}  // second option
     >
        <MoreHorizIcon  value={user}/>
     </Tooltip>

     <Menu
            id="basic-menu"
            anchorEl={anchorElRef} // second option
            open = {open}
            onClose={handleClose}
            getContentAnchorEl={null}
            value={user}
            anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
            transformOrigin={{vertical: 'top', horizontal: 'center'}}
        >
          <MenuItem  value={user.id} onClick={onNavigate}>
            <ManageAccountsIcon sx={{ margin: "1vh" }} />
                    Edit
          </MenuItem>
              <MenuItem value={user.id} onClick={onDelete}>
                <DeleteOutlineIcon sx={{ color: "red", margin: "1vh" }} />
                         Remove
               </MenuItem>                   
            </Menu>

我真的不明白為什么沒有設置 anchorEl，它顯示了最后一個元素

檢查工具提示onOpen事件，您可以在那里設置 userId

但我希望這能在某種程度上幫助你