Question

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

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

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

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/

在鼠标单击位置显示div

1 个答案: