在 ReactJS 中禁用 ContextMenu答案

【问题标题】：Disable ContextMenu in ReactJS在 ReactJS 中禁用 ContextMenu
【发布时间】：2021-09-01 17:37:27
【问题描述】：

第一次在这里发帖，希望我能以最有帮助的方式提出这个问题。我对编码很陌生，在试图推动自己的过程中，我决定尝试使用 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
        })
    }
}

我又浪费了很长时间，让一位资深的开发朋友帮我看看这个。这是解决方案。希望它可以帮助别人:-)！请参阅下面的评论：

【问题讨论】：

我又浪费了很长时间，让一位资深的开发朋友帮我看看这个。这是解决方案。希望它可以帮助别人:-)！
this.props.rightClick(e, this.props.index)} onClick={ () => {this.props.playerTurn(this.props.index)}} style={{color:COLORS[this.props.arrayVal], backgroundImage:this.backgroundChooser(this.props.arrayVal)} } > 然后rightClick() 改变：rightClick = (e, id) => { e.preventDefault() ...... }
你可以回答你自己的问题:)