Javascript 在鼠标单击的位置显示div

我有一个单元格表，我希望能够在右键单击点上创建一个菜单。我这里有一个小提琴的例子：

现在ContextMenu类只是我为本例创建的一个div。正如您所看到的，没有边框来形成实际的菜单。现在，当我单击其中一个单元格时，如何使此菜单显示在鼠标所在的位置？现在它显示在当前表div下

是否需要在componentWillMount下装入菜单div？

onContextMenu方法将鼠标单击的位置显示为e.pageX left和e.pageY top。基于此坐标定位关联菜单

另外，不要将ContextMenu组件的行为与父级的状态耦合，而是始终显示ContextMenu组件，但将其隐藏。像这样的

var ContextMenu = React.createClass({
    getInitialState: function(){
        return {contextMenuLocation: ''};
    },
    render: function() {
        var location = this.state.contextMenuLocation;
        var contentMenuStyle = {
            display: location ? 'block' : 'none',
            position: 'absolute', 
            left: location ? location.x : 0,
            top: location ? location.y : 0
        };
        return (
            <div id="results" style={contentMenuStyle}>
                Menu here
            </div>
        );
    }
});

render: function(){
  return (<div>
    .....
    <ContextMenu ref="contextMenu" />
  </div>);
}

_onContextMenu: function(e) {
    this.contextMenu.setState({
      contextMenuLocation: {'x' : e.pageX, 'y': e.pageY}
    });
    return false;
}

像这样展示

var ContextMenu = React.createClass({
    getInitialState: function(){
        return {contextMenuLocation: ''};
    },
    render: function() {
        var location = this.state.contextMenuLocation;
        var contentMenuStyle = {
            display: location ? 'block' : 'none',
            position: 'absolute', 
            left: location ? location.x : 0,
            top: location ? location.y : 0
        };
        return (
            <div id="results" style={contentMenuStyle}>
                Menu here
            </div>
        );
    }
});

render: function(){
  return (<div>
    .....
    <ContextMenu ref="contextMenu" />
  </div>);
}

_onContextMenu: function(e) {
    this.contextMenu.setState({
      contextMenuLocation: {'x' : e.pageX, 'y': e.pageY}
    });
    return false;
}

---

这是最新的演示

谢谢您的解释！还有一件事：当用户左键单击div时，我试图在页面内添加return false，以隐藏菜单，但没有成功。你知道问题出在哪里吗？不客气。您可以这样做。contextMenu.setState{contextMenuLocation:}；在_onPageClick中，它应该可以正常工作。这是一个演示