Reputation: 81
I am developing React js app with Material UI. I have implemented onClick in List and List Item. enter image description here I want to implement onRightClick event as well. Please help me.
Upvotes: 2
Views: 18381
Reputation: 811
According to the react docs, onContextMenu is the correct prop to pass. To prevent the standard functionality, you probably need to add e.preventDefault(); to your callback function.
Upvotes: 1
Reputation: 144
there is onContextMenu event in react defined events. if you want to change the rightClick action on your component or part of your component you need to write a custom eventHandler for onContextMenu event.
<div onContextMenu={this.someEvenetHandler}></div>
someEventHandler = (e) => {
"Do stuff here"
}
or something like that.
Upvotes: 4
Reputation: 144
Use onContextMenu
event where you want to show your default context menu, not browser context menu.
Upvotes: 8
Reputation: 3443
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="app"></div>
<script type="text/jsx">
var App = React.createClass({
handleClick: function(e) {
if (e.type === 'click') {
console.log('Left click');
} else if (e.type === 'contextmenu') {
console.log('Right click');
}
},
render : function(){
return <p onClick={this.handleClick} onContextMenu={this.handleClick} >Something </p>
}
});
React.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
Try running above snippet you will be able to identify left and right click respectively.
Upvotes: 1