javascript 在ReactJS中禁用ContextMenu

pdkcd3nj  于 2023-05-12  发布在  Java
关注(0)|答案(1)|浏览(127)

第一篇文章在这里,所以希望我能问这个问题最有帮助的方式可能。我对编码很陌生,在尝试推动自己的过程中,我决定尝试使用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
        })
    }
}

我又浪费了很长一段时间,让一位高级开发人员朋友帮我看了这个。这就是解决办法。希望对别人有帮助:-)!见以下评论:

jecbmhm3

jecbmhm31#

我知道这是一个老问题,但这是我的解决方案:首先,选择要禁用contextMenu的元素(在这种情况下,它是一个div元素),然后将此事件添加到元素中:
<div onContextMenu={(e)=> e.preventDefault()}... />

ReactDOM.render(<div onContextMenu={(e)=> e.preventDefault()}>right click me</div>, root)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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

相关问题