Javascript React contextmenu接收到右键单击的错误触发器
在react应用程序中使用with时,我遇到了一个奇怪的错误(没有其他库)。我有一个地图组件,可以拖放到位。我发现,如果用户按住左键并晃动鼠标一段时间,就会错误地触发上下文菜单的出现,即使用户没有右键单击。它并没有破坏应用程序,但它仍然是一个恼人的bug,我想知道如何消除它。相关代码如下:Javascript React contextmenu接收到右键单击的错误触发器,javascript,reactjs,contextmenu,pixi.js,Javascript,Reactjs,Contextmenu,Pixi.js,在react应用程序中使用with时,我遇到了一个奇怪的错误(没有其他库)。我有一个地图组件,可以拖放到位。我发现,如果用户按住左键并晃动鼠标一段时间,就会错误地触发上下文菜单的出现,即使用户没有右键单击。它并没有破坏应用程序,但它仍然是一个恼人的bug,我想知道如何消除它。相关代码如下: import React from 'react' import * as PIXI from 'pixi.js' import {ContextMenu, MenuItem, ContextMenuTrig
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
}
}
从“React”导入React
从“PIXI.js”导入*作为PIXI
从“react ContextMenu”导入{ContextMenu,MenuItem,ContextMenuTrigger}
导出默认类MyComponent扩展React.component{
建造师(道具){
超级(道具)
}}
render(){
返回
{(el)=>{this.stageRef=el}
/>
componentDidMount(){
const app=新的PIXI.Application({
宽度:screen.width,
高度:屏幕高度*0.8,
sharedLoader:是的,
sharedTicker:是的
})
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.setup()
{
这个{
//只需在屏幕上等距绘制三个精灵。此代码不绑定任何单击事件。
}
这个.onClick(e){
this.setState({clickX:e.data.global.x,clickY:e.data.global.y,clicked:true})
}
onMouseMove(e){
if(this.state.clicked){
设x=e.data.global.x
设y=e.data.global.y
让xDiff=this.state.clickX-x
让yDiff=this.state.clickY-y
this.arrayOfDraggableSprites.forEach((精灵)=>{
sprite.x-=xDiff
雪碧.y-=yDiff
}
}
我在代码中没有看到任何我认为会触发错误右键单击的内容,但希望其他人会这样做。
默认情况下,react contextmenu配置为与mobile一起使用,其“保持显示”值为1000毫秒。它假设用户在滚动时不会按住鼠标按钮1秒钟,而我的应用程序则不是这样
通过将hold to display值设置为-1,它不再触发错误。解决方法一如既往,是请求帮助,然后在一小时后立即解决问题