React-contextmenu 正在接收右键单击的错误触发器答案

【问题标题】：React-contextmenu is receiving a false trigger for a right clickReact-contextmenu 正在接收右键单击的错误触发器
【发布时间】：2020-01-27 13:16:18
【问题描述】：

在 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
    }
    }

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

【问题讨论】：

标签： javascript reactjs contextmenu pixi.js

【解决方案1】：

Figured it out.

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

通过将保持显示值设置为 -1，它不再触发错误。一如既往，解决方案是寻求帮助，然后在一个小时后立即解决。

【讨论】：