search

reachtokish / rctx-contextmenu

:bowtie: :sparkles: Context menu for React
https://reachtokish.github.io/rctx-contextmenu/
67 stars 15 forks source link

ContextMenuItem OnClick Doesn't Work For Me #27

Open renzhiVivio opened 2 years ago

renzhiVivio commented 2 years ago

Relevant code or config


            id="treeContextMenu"
          >
          <div
            id="projectPageContainer"
            key="projectPageContainer"  
          >
          Page One
          </div>
          </ContextMenuTrigger>
<ContextMenu id="treeContextMenu" >
        <ContextMenuItem onClick={() => console.log("I'm clicked!")} >Set As HomePage</ContextMenuItem>
        <ContextMenuItem onClick={() => handlePageControlContextMenu('changeName')}>Change Page Name</ContextMenuItem>
        <ContextMenuItem onClick={() => handlePageControlContextMenu('moveToTop')}>Move To Top</ContextMenuItem>
        <ContextMenuItem onClick={() => handlePageControlContextMenu('moveToBottom')}>Move To Bottom</ContextMenuItem>
      </ContextMenu>```

Hello,

I like the UI. The issue I met is nothing happen when I left click the context menu item. 
As you see, even I click the first one console.log sth, it didn't show anything.

For your reference, I paste my other plugins version.

"@ant-design/charts": "^1.3.4",
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-card": "^1.18.24",
    "@ant-design/pro-descriptions": "^1.10.34",
    "@ant-design/pro-form": "^1.52.12",
    "@ant-design/pro-layout": "^6.32.5",
    "@ant-design/pro-table": "^2.62.6",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@types/react-color": "^3.0.6",
    "@umijs/plugin-openapi": "^1.3.2",
    "@umijs/route-utils": "^2.0.5",
    "antd": "^4.18.4",
    "async-mutex": "^0.3.2",
    "classnames": "^2.3.1",
    "echarts": "^5.3.0",
    "fbemitter": "^3.0.0",
    "keymaster": "^1.6.2",
    "leaflet": "^1.7.1",
    "leaflet.markercluster": "^1.5.3",
    "lodash": "^4.17.21",
    "long": "^5.2.0",
    "moment": "^2.29.1",
    "omit.js": "^2.0.2",
    "protobufjs": "^6.11.2",
    "rctx-contextmenu": "^1.3.5",
    "react": "^17.0.2",
    "react-color": "^2.19.3",
    "react-contexify": "^5.0.0",
    "react-dev-inspector": "^1.7.1",
    "react-dnd": "^14.0.5",
    "react-dnd-html5-backend": "^14.1.0",
    "react-dom": "^17.0.2",
    "react-grid-layout": "^1.3.1",
    "react-loading": "^2.0.3",
    "redux-logger": "^3.0.6",
    "redux-undo": "^1.0.1",
    "umi": "^3.5.20",
    "umi-request": "^1.4.0",
    "websocket": "^1.0.34"
reachtokish commented 2 years ago

Hi @renzhiVivio , thanks for taking time commenting the issue you are facing. Let me get into the issue you are facing.

Thanks, Kishore

reachtokish commented 2 years ago

Hi @renzhiVivio , the below code works for me. Kindly use that.

import {
  ContextMenuTrigger,
  ContextMenu,
  ContextMenuItem
} from "rctx-contextmenu";

export default function App() {
  const handlePageControlContextMenu = (text) => {
    console.log(text);
  };

  return (
    <div className="App">
      <ContextMenuTrigger id="my-context-menu-1">
        <div className="box">Right Click On Me</div>
      </ContextMenuTrigger>

      <ContextMenu id="my-context-menu-1">
        <ContextMenuItem onClick={() => console.log("I'm clicked!")}>
          Set As HomePage
        </ContextMenuItem>
        <ContextMenuItem
          onClick={() => handlePageControlContextMenu("changeName")}
        >
          Change Page Name
        </ContextMenuItem>
        <ContextMenuItem
          onClick={() => handlePageControlContextMenu("moveToTop")}
        >
          Move To Top
        </ContextMenuItem>
        <ContextMenuItem
          onClick={() => handlePageControlContextMenu("moveToBottom")}
        >
          Move To Bottom
        </ContextMenuItem>
      </ContextMenu>
    </div>
  );
}

Let me know if this still doesn't work.

Thanks,