在ReactJS中禁用右键菜单

Question

这是我的第一篇帖子，希望能够以最有帮助的方式提出问题。我对编程非常新手，并尝试使用React重新创建扫雷游戏，而且不使用任何教程。我已经实现了大部分功能，但在某些部分卡住了。我正在使用事件监听器“onContextMenu”来注册右键单击以在程序中“标记”地雷。但我无法正确地隔离它，或者可能是语法问题，防止菜单同时弹出。在JS中，这似乎非常简单，只需在事件监听器上返回false，但我无法在React中解决它。

我目前正在使用“onContextMenu”处理右键单击，并调用一个处理该事件监听器的函数来处理标记分配。我是否可以在函数内禁用上下文菜单的显示？

感谢您能提供的任何帮助！

当前呈现的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
        })
    }
}

我又浪费了很长一段时间，并请高级开发人员朋友帮忙看了看。这是解决方案。希望它能帮助其他人 :-)! 请参见下面的评论：

- jscotty723

---

我又浪费了一大段时间，最后找了一位资深开发人员朋友来帮我看这个问题。以下是解决方案，希望能对其他人有所帮助 :-)! - jscotty723

<div id={this.props.index} className="square" onContextMenu={ (e) => 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() ...... } - jscotty723

你可以回答自己的问题 :) - Jared Smith

Answer 1

我知道这是一种老方法，但这是我的解决方案： 首先，选择您想要禁用上下文菜单的元素（在此情况下是一个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元素右击不会触发上下文菜单

- Max Svidlo