react添加右键点击事件

1.在HTML里面支持contextmenu事件（右键事件）。所以需要在组建加载完时添加此事件，销毁组建时移除此事件。

2. 需要增加一个state，名称为visible，用来控制菜单是否显示。在_handleContextMenu（右键事件）里面，它被设置为true，从而可以显示出来。那么，当鼠标点击其它位置或者滚动的时候，需要把 它设置为false。

例如代码：

class ContextMenu extends React.Component {

constructor(props) {

super(props);

this.state = {

visible: false,

};

}

componentDidMount() {

document.addEventListener('contextmenu', this._handleContextMenu);

document.addEventListener('click', this._handleClick);

document.addEventListener('scroll', this._handleScroll);

};

componentWillUnmount() {

document.removeEventListener('contextmenu', this._handleContextMenu);

document.removeEventListener('click', this._handleClick);

document.removeEventListener('scroll', this._handleScroll);

}

_handleContextMenu = (event) => {

// this.setState({ visible:false });//当点击其他地方右键时可以根据需求来判断是否需要先关闭菜单

event.preventDefault();

this.setState({ visible: true });

const clickX = event.clientX;

const clickY = event.clientY; //事件发生时鼠标的Y坐标

const screenW = window.innerWidth; //文档显示区的宽度

const screenH = window.innerHeight;

const rootW = this.root.offsetWidth; //右键菜单本身元素的宽度

const rootH = this.root.offsetHeight;

// right为true，说明鼠标点击的位置到浏览器的右边界的宽度可以放contextmenu。

// 否则，菜单放到左边。 // top和bottom，同理。

const right = (screenW - clickX) > rootW;

const left = !right;

const top = (screenH - clickY) > rootH;

const bottom = !top;

if (right) {

this.root.style.left = `${clickX + 15}px`;

}

if (left) {

this.root.style.left = `${clickX - rootW - 15}px`;

}

if (top) {

this.root.style.top = `${clickY + 15}px`;

}

if (bottom) {

this.root.style.top = `${clickY - rootH - 15}px`;

}

};

_handleClick = (event) => {

const { visible } = this.state;

const wasOutside = !(event.target.contains === this.root);

if (wasOutside && visible) this.setState({ visible: false, });

};

_handleScroll = () => {

const { visible } = this.state;

if (visible) this.setState({ visible: false, });

};

render() {

const { visible } = this.state;

return

{ visible？

<div ref={ref => {this.root = ref}} className="contextMenu">

<div>右键菜单内容</div>

</div>: null}

};

}

ReactDOM.render(<ContextMenu />, document.getElementById('root'));