第一篇文章在这里,所以希望我能以最有帮助的方式提出这个问题。我对编码还很陌生,在努力推动自己的过程中,我决定尝试使用 React 来重新创建扫雷,而不是使用任何教程。我已经获得了很多功能,但我真的停留在这部分上。我正在使用事件侦听器“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()}... />
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 不会触发上下文菜单
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)