Reputation: 2795
I have a table of cells, and I want to be able to create a menu on the point of right click. I have an example of my fiddle here: jsFiddle
Now the ContextMenu
class is just a div that I created for this example. As you can see there are no borders to form the actual menu. Now how can I make this menu display at the position my mouse is when I click on one of these cells? Right now it displays under the current table div.
Do I need to mount the menu div under componentWillMount()
?
Upvotes: 0
Views: 5705
Reputation: 33628
onContextMenu
method gives the location of mouse click as e.pageX (left)
and e.pageY (top)
. Based on this coordinates position the context menu absolutely.
Also, instead of coupling ContextMenu component's behavior with parent's state, display the ContextMenu component always (but hidden). Something like this
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>
);
}
});
Parent component's render would look like this
render: function(){
return (<div>
.....
<ContextMenu ref="contextMenu" />
</div>);
}
Maintain a reference to contextMenu in parent component
componentDidMount: function(){
this.contextMenu = this.refs.contextMenu;
}
Display it like this
_onContextMenu: function(e) {
this.contextMenu.setState({
contextMenuLocation: {'x' : e.pageX, 'y': e.pageY}
});
return false;
}
Here is the updated demo http://jsfiddle.net/dhirajbodicherla/kb3gN/11383/
Upvotes: 8