React dnd - 棋盘教程示例问题

Question

我想让马可以移动到任何方格（不遵循游戏规则）。所以我更改了函数：文件 Game.js 中的 canMoveKnight，如下所示：

canMoveKnight(toX, toY) {
    return true;  
}

结果是：骑士根本不能移动。

但是如果我将函数更改为：

canMoveKnight(toX, toY) {
    const [x, y] = this.knightPosition
    return (x !== toX || y !== toY)
}

基本上就是把骑士位置排除掉。在其他方块中仍然 return TRUE。有效。

任何人都可以帮助解释为什么 return 所有方块都不起作用？

幸运的是，我认为有人在问题关闭前回答了这个问题。

我试过这个答案。通过将 zIndex 添加到 Knight，它确实有效。

没有 zIndex，BoardSquare 会捕获鼠标事件，并且 BoardSquare 不可拖动。

Answer 1

您运行遇到了一个奇怪的问题！我也很想听听其他人对此的回答，因为我仍然对问题的原因很好奇。不过我确实为您找到了解决方案！

如果骑士棋子位于同样有效的棋子上，它似乎以某种方式被阻止被点击。（如果有人知道为什么请分享）

要解决此问题，您可以将 position: absolute 添加到骑士以及 z-index: <value>。这使得骑士 div 出现在所有其他事物之上，因此它仍然可以拖动。

具体来说，您可以将 Knight.jsx 中的 knightStyle 更改为：

const knightStyle = {
    fontSize: 40,
    fontWeight: 'bold',
    cursor: 'move',
    position: 'absolute',
    zIndex: 50,
};

React dnd - chessboard tutorial example issue