顯示在鼠標的位置一個div單擊

我有細胞的表，我希望能夠在右鍵點創建菜單。我有一個小提琴的例子：jsFiddle 顯示在鼠標的位置一個div單擊

現在ContextMenu類只是我爲這個例子創建的一個div。正如你所看到的，沒有邊界來形成實際的菜單。現在，當我點擊其中一個單元格時，如何將此菜單顯示在鼠標所在的位置？現在它顯示在當前表格div下。

我需要componentWillMount()下安裝菜單DIV？

2015-06-11 PhoonOne

onContextMenu方法給鼠標點擊的位置爲e.pageX (left)和e.pageY (top)。基於這個座標位置的上下文菜單絕對。

另外，代替與父母的狀態聯接的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>); 
}

保持父組件到文本菜單參考

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/

來源

2015-06-11 18:49:55 Dhiraj

感謝您的解釋！還有一兩件事：我試圖添加「返回false」裏面_onPageClick隱藏菜單，當用戶點擊左側的股利，但沒有運氣。你知道問題是什麼嗎？ – PhoonOne

不客氣。你可以做'this.contextMenu.setState（{contextMenuLocation： ''}）;'在_onPageClick，它應該工作的罰款。這裏是一個演示http://jsfiddle.net/dhirajbodicherla/kb3gN/11384/ – Dhiraj

顯示在鼠標的位置一個div單擊

回答

相關問題