在ReactJS中禁用ContextMenu

问题描述

在这里先发帖，希望我能以最有用的方式问这个问题.我对编码非常陌生，在尝试推动自己时，我决定尝试使用React而不是任何教程来重新创建Minesweeper.我已经获得了很多功能，但确实停留在这部分上.我正在使用事件侦听器"onContextMenu"注册右键单击，以标记"程序中的地雷.但是我找不到正确的隔离方式，或者这是一个语法问题，导致菜单无法同时弹出.在JS中，仅在事件侦听器上返回false似乎非常简单，但我无法在React中弄清楚.

first post here so hopefully I can ask this question the most helpful manner possible. I'm pretty new to coding and in trying to push myself decided to attempt to recreate Minesweeper using React and not using any tutorial. I've gotten a lot of the functionality but am really stuck on this part. I am using the event listener 'onContextMenu' to register a right click to "flag" a mine in the program. But I can't figure the right way to isolate it or maybe it's a syntax issue preventing the menu from popping up at the same time. In JS it seems really simple of just returning false on the event listener, but I can't figure it out in React.

我当前正在使用'onContextMenu'处理我的右键单击，并调用一个函数来处理带有该事件侦听器的标志分配.我还可以在函数内禁用contextMenu的显示吗?

I'm currently using 'onContextMenu' to handle my right click and calling a function that handles the flag assignment with that event listener. Can I also within a function disable the contextMenu from showing?

感谢您提供的任何帮助！

Thank you for any help you can offer!

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

The div being rendered looks like this right now:

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

我能够再浪费一些时间，并结识一位资深开发人员朋友为我着想.这是解决方案.希望它对其他人有帮助:-)！参见下面的评论:

I was able to waste another long bit of time and get a senior dev friend to look at this for me. Here was the solution. Hope it helps someone else :-)! See comment below:

推荐答案

我知道它很旧，但是这里是我的解决方案:首先，选择要禁用contextMenu的元素(在本例中为div元素)，然后将其添加到元素中:

I know its an old one but heres my solution for this:first, select the element you want to disable the contextMenu for (in this occasion its a div element) and just add this piece to the element:

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

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

right clicking the div above won't trigger the context menu

这篇关于在ReactJS中禁用ContextMenu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！