使用ReactJS实现自定义行列网格框及箭头键导航功能

步骤1：完善HTML结构 #

给现有元素添加ID方便后续操作，同时新增网格容器：

<input type="number" name="row" id="rowInput" placeholder="行数" min="1">
<input type="number" name="column" id="colInput" placeholder="列数" min="1">
<button id="createBtn">Create Box</button>
<div id="gridContainer"></div>

步骤2：添加基础CSS样式 #

用CSS Grid实现网格布局，给网格项设置默认样式和选中高亮效果：

#gridContainer {
  margin-top: 20px;
  display: grid;
  gap: 4px;
}

.grid-item {
  width: 50px;
  height: 50px;
  border: 2px solid #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.grid-item.active {
  border-color: #2196F3;
  background-color: #E3F2FD;
}

步骤3：编写JavaScript逻辑 #

实现网格生成、选中状态管理和箭头键导航功能：

const rowInput = document.getElementById('rowInput');
const colInput = document.getElementById('colInput');
const createBtn = document.getElementById('createBtn');
const gridContainer = document.getElementById('gridContainer');

let currentIndex = -1;
let gridItems = [];
let rows = 0;
let cols = 0;

// 生成网格
function generateGrid() {
  rows = parseInt(rowInput.value);
  cols = parseInt(colInput.value);

  if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
    alert('请输入有效的正整数');
    return;
  }

  // 清空现有网格
  gridContainer.innerHTML = '';
  gridItems = [];
  currentIndex = -1;

  // 设置网格列数
  gridContainer.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;

  // 创建网格项
  for (let i = 0; i < rows * cols; i++) {
    const item = document.createElement('div');
    item.className = 'grid-item';
    item.textContent = i + 1; // 可选：显示序号
    item.addEventListener('click', () => selectItem(i));
    gridContainer.appendChild(item);
    gridItems.push(item);
  }

  // 默认选中第一个项
  if (gridItems.length > 0) {
    selectItem(0);
  }
}

// 选中指定网格项
function selectItem(index) {
  if (currentIndex !== -1) {
    gridItems[currentIndex].classList.remove('active');
  }
  currentIndex = index;
  gridItems[currentIndex].classList.add('active');
  // 滚动到选中项（可选）
  gridItems[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

// 处理箭头键导航
function handleKeydown(e) {
  if (gridItems.length === 0) return;

  switch(e.key) {
    case 'ArrowUp':
      if (currentIndex - cols >= 0) {
        selectItem(currentIndex - cols);
      }
      e.preventDefault();
      break;
    case 'ArrowDown':
      if (currentIndex + cols < rows * cols) {
        selectItem(currentIndex + cols);
      }
      e.preventDefault();
      break;
    case 'ArrowLeft':
      if (currentIndex % cols !== 0) {
        selectItem(currentIndex - 1);
      }
      e.preventDefault();
      break;
    case 'ArrowRight':
      if ((currentIndex + 1) % cols !== 0) {
        selectItem(currentIndex + 1);
      }
      e.preventDefault();
      break;
  }
}

// 绑定事件
createBtn.addEventListener('click', generateGrid);
document.addEventListener('keydown', handleKeydown);

功能说明 #

• 输入有效行数和列数后，点击按钮即可生成对应规格的网格
• 点击任意网格项可选中它，选中项会高亮显示
• 使用上下左右箭头键可在网格间导航，自动处理边界限制（比如第一行无法向上移动）
• 可选：网格项显示序号，选中时自动滚动到视野内

内容的提问来源于stack exchange，提问作者Sid Khetarpal