javascript - 在鼠标点击的位置显示一个div

Question

我有一个单元格表格，我希望能够在右键单击时创建一个菜单。我在这里有一个 fiddle 的例子:jsFiddle

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

我需要将菜单 div 挂载到 componentWillMount() 下吗？

Answer 1

onContextMenu 方法将鼠标单击的位置指定为 e.pageX(左) 和 e.pageY(上)。基于此坐标绝对定位上下文菜单。

此外，不要将 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/