反应上下文菜单正在接收右键单击的错误触发器

Question

在 react 应用程序中将 react-contextmenu 与 PIXI 一起使用时.js我遇到了一个奇怪的错误(没有其他库在起作用(。我有一个可以拖放到位的地图组件。我发现，如果用户按住左键单击按钮并摇晃鼠标一会儿，即使用户没有右键单击，它也会错误地触发上下文菜单的出现。它不是应用程序破坏，但它仍然是一个烦人的错误，我想弄清楚如何消除它。相关代码如下：

import React from 'react'
import * as PIXI from 'pixi.js'
import {ContextMenu, MenuItem, ContextMenuTrigger} from 'react-contextmenu'
export default class MyComponent extends React.component{
constructor(props){
super(props)
}}
render(){
return <React.Fragment>
<ContextMenuTrigger id='aUniqueID'>
<div className='stageDiv'
ref=>{(el)=>{this.stageRef = el}}
/>
</ContextMenuTrigger>
<ContextMenu id='aUniqueID'>
<MenuItem onClick={this.myAction.bind(this)}/>
</ContextMenu>
</ReactFragment>
componentDidMount(){
const app = new PIXI.Application({
width:screen.width,
height:screen.height*0.8,
sharedLoader:true,
sharedTicker:true
})
app.renderer.plugins.interaction.on('mouseMove',this.mover.bind(this)).on('mousedown',this.onClick.bind(this))
this.stageRef.append(app.view)
app.stage.interactive = true
this.app = app
this.createMap()
this.setup()
{
this.createMap(){
//Just draws three sprites at equal intervals along the screen. No click events are bound to this code.
}
this.onClick(e){
this.setState({clickX:e.data.global.x,clickY:e.data.global.y,clicked:true})
}
onMouseMove(e){
if(this.state.clicked){
let x = e.data.global.x
let y = e.data.global.y
let xDiff = this.state.clickX - x
let yDiff = this.state.clickY - y
this.arrayOfDraggableSprites.forEach((sprite)=>{
sprite.x -= xDiff
sprite.y -= yDiff
}
}

我在代码中没有看到任何我认为会触发错误右键单击的内容，但希望其他人会这样做。

Answer 1

想通了。

默认情况下，react-contextmenu 配置为与移动设备配合使用，并且具有 1000 毫秒的"按住显示"值。它假设用户在滚动时不会按住鼠标按钮 1 秒钟，而我的应用程序并非如此。

通过将保留显示值设置为 -1，它不再触发 bug。与往常一样，解决方案是寻求帮助，然后在一小时后立即弄清楚。