React-contextmenu получает ложный триггер для правого клика - PullRequest
0 голосов
/ 27 января 2020

У меня странная ошибка при использовании реагировать-контекстного меню с 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
    }
    }

Я не вижу в этом коде ничего, что могло бы вызвать ложный щелчок правой кнопкой мыши, но, надеюсь, это сделает кто-то другой.

1 Ответ

1 голос
/ 27 января 2020

Разобрался .

По умолчанию, response-contextmenu настроен для работы с мобильными устройствами и имеет значение «удерживать для отображения» 1000 миллисекунд. Предполагается, что пользователь не будет удерживать нажатой кнопку мыши в течение 1 секунды во время прокрутки, что было не так для моего приложения.

При установке значения удержания для отображения на -1 оно больше не срабатывает баг. Решение, как всегда, заключалось в том, чтобы попросить о помощи, а затем мгновенно выяснить это.

...