在鼠标单击位置显示div

Question

我有一个单元格表,我希望能够在右键单击上创建一个菜单.我有一个小提琴的例子:jsFiddle

现在这个ContextMenu类只是我为这个例子创建的一个div.如您所见,没有边框形成实际菜单.现在,当我点击其中一个单元格时,如何在鼠标位置显示此菜单？现在它显示在当前表格div下.

我是否需要安装菜单div componentWillMount()？

Answer 1

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>);
}

在父组件中维护对contextMenu的引用

componentDidMount: function(){
  this.contextMenu = this.refs.contextMenu;
}

像这样显示它

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

这是更新的演示http://jsfiddle.net/dhirajbodicherla/kb3gN/11383/