Javascript 使用React JS右键单击菜单

我想知道是否有一种最佳实践/正确的方法来设置React组件的右键单击菜单

我现在有这个

// nw is nw.gui from Node-Webkit
componentWillMount: function() {
    var menu = new nw.Menu();
    menu .append(new nw.MenuItem({
        label: 'doSomething',
        click: function() {
            // doSomething
        }
    }));

    // I'd like to know if this bit can be done in a cleaner/more succinct way...
    // BEGIN
    var that = this;
    addEventListener('contextmenu', function(e){
        e.preventDefault();
        // Use the attributes property to uniquely identify this react component 
        // (so different elements can have different right click menus)
        if (e.target.attributes[0].nodeValue == that.getDOMNode().attributes[0].nodeValue) {
            menu.popup(e.x, e.y);
        }
    })
    // END
},

这是可行的，但感觉有点混乱，我想知道是否还有其他方法可以使用，如果有任何信息，我将不胜感激

谢谢

更新：

算了吧，这是你能做的

var addMenu;

componentWillMount: function() {
    addMenu = new nw.Menu();
    addMenu.append(new nw.MenuItem({
        label: 'doSomething',
        click: function() {
            // doSomething
        }
    }));
},

contextMenu: function(e) {
    e.preventDefault();
    addMenu.popup(e.clientX, e.clientY);
},

render: function(){
    return <button onClick={this.handleClick} onContextMenu={this.contextMenu}>SomethingUseful</button>
}

var添加菜单；
componentWillMount:function（）{
addMenu=新的nw.Menu（）；
addMenu.append（新的nw.MenuItem）({
标签：“doSomething”，
单击：函数（）{
//剂量
}
}));
},
上下文菜单：函数（e）{
e、 预防默认值（）；
addMenu.popup（e.clientX，e.clientY）；
},
render:function（）{
归还一些有用的东西
}

---

在“渲染”中，当右键单击此react组件时，您可以将函数传递给onContextMenu。

使用弹出菜单时需要注意的事项很少：

它应该远离其父级和同级渲染-最好是在一个覆盖层中，该覆盖层是document.body的最后一个子级

特殊的逻辑应该注意，它总是显示在屏幕上，从不被屏幕边缘裁剪

如果涉及层次结构，则子弹出窗口应与上一个弹出窗口（打开器）中的项目对齐

我创建了一个库，您可以使用它来完成所有这些：

---

在使用材质UI时，我也在寻找解决方案，因此您要做的是首先禁用浏览器的默认行为，然后右键单击，然后添加所需的菜单，以下是工作代码：

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import SendIcon from '@material-ui/icons/Send';

const StyledMenu = withStyles({
  paper: {
    border: '1px solid #d3d4d5',
  },
})((props) => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
    {...props}
  />
));

const StyledMenuItem = withStyles((theme) => ({
  root: {
    '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
        color: theme.palette.common.white,
      },
    },
  },
}))(MenuItem);

export default function CustomizedMenus() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    event.preventDefault();
    setAnchorEl(event.currentTarget);
  };

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

  return (
    <div>
      <Button
        aria-controls="customized-menu"
        aria-haspopup="true"
        variant="contained"
        color="primary"
        onContextMenu={handleClick}
      >
        Open Menu
      </Button>
      <StyledMenu
        id="customized-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <StyledMenuItem>
          <ListItemIcon>
            <SendIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Sent mail" />
        </StyledMenuItem>
        <StyledMenuItem>
          <ListItemIcon>
            <DraftsIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Drafts" />
        </StyledMenuItem>
        <StyledMenuItem>
          <ListItemIcon>
            <InboxIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </StyledMenuItem>
      </StyledMenu>
    </div>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/MoveToInbox”导入InBoxion；
从“@material ui/icons/Drafts”导入DraftsIcon；
从“@material ui/icons/Send”导入SendIcon；
const styled菜单=带样式({
论文：{
边框：“1px实心#d3d4d5”，
},
})（（道具）=>(
));
const StyledMenuItem=带有样式（（主题）=>({
根目录：{
“&：焦点”：{
背景色：theme.palete.primary.main，
“&.muilistitemcon根，&.MuiListItemText主”{
颜色：theme.palette.common.white，
},
},
},
}))（MenuItem）；
导出默认函数CustomizedMenus（）{
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量handleClick=（事件）=>{
event.preventDefault（）；
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
返回(
打开菜单
);
}

---

看看这篇文章，我想它会对你有所帮助。@pablolmiranda啊，很酷，谢谢，以前没有看过这篇文章。我找到了这个视频（），它包含关于node webkit的信息，但与React无关。我只是不知道是否有更好的方法。我想我可以使用一个唯一的id和一个div来引用这个项目，这可能会稍微干净一些，我不确定。谢谢你！您可以添加JSFIDLE示例吗？嘿，这里有一些可能有用的东西-（）我使用的右键单击菜单（addMenu=new nw.menu（））来自节点Webkit，它提供对本机菜单的访问。希望这个例子能给你一个想法@汤姆，这玩意儿能用吗？我所看到的只是一个白色区域，输出/点击事件应该在该区域发生。@kojow7我恐怕从我看到这一点到现在已经很久了，我不知道我在2015年尝试的方法是否仍然有效@kojow7这里有一个更新的提琴：（必须将“语言”设置从“带jQuery”切换到“带JSX的巴贝尔”）