如何仅使用键盘 React 移动数字答案

【问题标题】：How can I move figures only with keyboard React如何仅使用键盘 React 移动数字
【发布时间】：2022-07-20 18:43:26
【问题描述】：

export const Chessboard: React.FC = () => {
  const board = [];

  for (let j = horisontalAxis.length - 1; j >= 0; j -= 1) {
    for (let i = 0; i < verticalAxis.length; i += 1) {
      const num = j + i + 2;
      let image = '';

      figures.forEach(el => {
        if (el.x === i && el.y === j) {
          image = el.image;
        }
      });

      board.push(<Cell key={`${i}, ${j}`} image={image} num={num} />);
    }
  }

  return (
    <div className="chessboard">{board}</div>
  );
};

我正在尝试制作仅适用于键盘的国际象棋游戏。如何在没有键盘的情况下选择带键盘的图形并进行移动？

【问题讨论】：

标签： reactjs chess onkeydown

【解决方案1】：

实现一个游标。创建一个包含光标当前坐标 (x,y) 的状态。还要在您的板上绘制光标（如单元格周围的边框）。然后监听箭头键的按键并使用它来更新光标位置。

然后你需要更多的键（空格、回车），这些键让你在光标位置选择一个片段，或者放下一个选定的片段。这会增加一些状态（持有的部分，可能为空），您需要考虑如何将其可视化。

【讨论】：