繁体   English   中英

在ReactJS中禁用ContextMenu

[英]Disable ContextMenu in ReactJS

首先发布在这里,希望我能以最有用的方式提出这个问题。 我对编码很新,并试图推动自己决定尝试使用React重新创建Minesweeper而不使用任何教程。 我已经获得了很多功能,但我确实坚持这一部分。 我正在使用事件监听器'onContextMenu'来注册右键以“标记”程序中的一个地雷。 但我无法找到隔离它的正确方法,或者这可能是一个语法问题,导致菜单无法同时弹出。 在JS中,在事件监听器上返回false似乎很简单,但我无法在React中弄明白。

我正在使用'onContextMenu'来处理我的右键单击并调用一个函数来处理该事件监听器的标志赋值。 我是否也可以在函数内禁用contextMenu显示?

感谢您提供的任何帮助!

正在渲染的div现在看起来像这样:

<div
   contextMenu="none"
   className="square"
   onContextMenu={() => this.props.rightClick(props.arrayVal)}
   onClick={() => {this.props.playerTurn(this.props.index)}}
   style={{color:COLORS[this.props.arrayVal], backgroundImage:this.backgroundChooser(this.props.arrayVal)}}
    >
       {this.squareContent(this.props.arrayVal)}
</div> 

被调用的函数如下所示:

rightClick = (id) => {
    let { board, gameWon, minesLeft } = this.state
    let mineCount = minesLeft
    let move = board
    if (gameWon === false) {
        if (board[id] === -1) {
            move[id] = 9
            mineCount -= 1
        } else if (board[id] === 9) {
            move[id] = "?"
            mineCount += 1
        } else if (board[id] === "?") {
            move[id] = -1
        }
        this.setState({
            board: move,
            minesLeft: mineCount
        })
    }
}

我能够浪费另一段时间并让一位资深的开发朋友为我看这个。 这是解决方案。 希望它可以帮助别人:-)! 见下面的评论:

我知道它是一个旧的但是我的解决方案:首先,选择你想要禁用contextMenu的元素(在这种情况下它是一个div元素),然后将这个片段添加到元素:

<div onContextMenu={(e)=> e.preventDefault()}... />

右键单击上面的div将不会触发上下文菜单

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM