React中实现点击时基于秒数匹配单元格并统计同字母数量

需求描述 #

构建一个5×5随机字母网格，每个单元格关联行号+列号的两位编号（例如：第一行第二列的单元格值为12）。点击按钮时完成以下操作：

1. 获取当前时间的秒数；
2. 查找编号与该秒数或其反转值相同的单元格（例如：秒数为24时，查找编号为'24'和'42'的单元格）；
3. 统计这些单元格中相同字母的数量并展示结果。

现有代码 #

Grid.js #

const alphabet = "abcdefghijklmnopqrstuvwxyz";

const getRandomLetterRow = (size) =>
  Array.from({ length: size }, () => {
    return alphabet[Math.floor(Math.random() * alphabet.length)];
  });

const generateGrid = (size = 5) => {
  return Array.from({ length: size }, () => {
    return getRandomLetterRow(size);
  });
};

function Grid() {
  const [grid, setGrid] = useState(generateGrid);
  return (
    <div className="grid">
      {grid.map((row, rowIndex) => (
        <div key={rowIndex} className="table_row" value={rowIndex}>
          <div key={rowIndex}>{rowIndex}</div>
          {row.map((col, colIndex) => (
            <div key={colIndex} className="cell">
              {col}
              <p>
                {colIndex}
                {rowIndex}
              </p>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

App.js #

const d = new Date();
  const s = d.getSeconds();
  function handleClick() {

  }
  return (
    <div className="app">
      <button onClick={handleClick}>Click</button>
      <Grid/>
    </div>
  );
}

实现方案 #

1. 状态提升与组件解耦 #

将Grid组件的网格状态提升到App组件，让父组件能直接访问网格数据，便于后续逻辑处理。修改Grid为受控组件：

修改后的Grid.js

import { useState } from 'react';

const alphabet = "abcdefghijklmnopqrstuvwxyz";

const getRandomLetterRow = (size) =>
  Array.from({ length: size }, () => {
    return alphabet[Math.floor(Math.random() * alphabet.length)];
  });

// 导出生成网格的函数，供App调用
export const generateGrid = (size = 5) => {
  return Array.from({ length: size }, () => {
    return getRandomLetterRow(size);
  });
};

// 接收父组件传递的grid数据
function Grid({ grid }) {
  return (
    <div className="grid">
      {grid.map((row, rowIndex) => (
        <div key={rowIndex} className="table_row">
          {/* 显示从1开始的行号 */}
          <div>{rowIndex + 1}</div>
          {row.map((col, colIndex) => (
            {/* 用行+列的组合作为唯一key，避免重复 */}
            <div key={`${rowIndex+1}-${colIndex+1}`} className="cell">
              {col}
              {/* 显示行号+列号的两位编号（从1开始） */}
              <p>
                {rowIndex + 1}{colIndex + 1}
              </p>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default Grid;

2. 实现核心逻辑（App.js修改） #

在App组件中完成秒数获取、单元格匹配、字母统计的逻辑，并添加结果展示：

修改后的App.js

import { useState } from 'react';
import Grid, { generateGrid } from './Grid';

function App() {
  // 初始化网格状态
  const [grid, setGrid] = useState(generateGrid());
  // 存储统计结果
  const [statsResult, setStatsResult] = useState('');

  const handleClick = () => {
    // 1. 获取当前秒数并格式化为两位字符串（补前导零）
    const currentSec = new Date().getSeconds();
    const secStr = currentSec.toString().padStart(2, '0');
    // 生成反转后的秒数字符串
    const reversedSecStr = secStr.split('').reverse().join('');

    // 2. 查找匹配的单元格字母
    const matchedLetters = [];
    grid.forEach((row, rowIndex) => {
      row.forEach((letter, colIndex) => {
        // 计算单元格编号：行号+列号（从1开始）
        const cellId = `${rowIndex + 1}${colIndex + 1}`;
        // 匹配秒数或其反转值
        if (cellId === secStr || cellId === reversedSecStr) {
          matchedLetters.push(letter);
        }
      });
    });

    // 处理无匹配的情况
    if (matchedLetters.length === 0) {
      setStatsResult('未找到匹配的单元格');
      return;
    }

    // 3. 统计相同字母的数量
    const letterCount = {};
    matchedLetters.forEach(letter => {
      letterCount[letter] = (letterCount[letter] || 0) + 1;
    });

    // 格式化结果字符串
    let resultText = `匹配到的字母：${matchedLetters.join(', ')}\n`;
    resultText += '字母统计：\n';
    Object.entries(letterCount).forEach(([letter, count]) => {
      resultText += `${letter}: ${count}个\n`;
    });
    setStatsResult(resultText);
  };

  return (
    <div className="app">
      <button onClick={handleClick}>点击统计</button>
      <Grid grid={grid} />
      {/* 展示统计结果 */}
      {statsResult && (
        <div className="stats-result">
          <pre>{statsResult}</pre>
        </div>
      )}
    </div>
  );
}

export default App;

关键细节说明 #

• 编号规则修正：将单元格编号调整为行号+列号且从1开始，与需求描述的例子（第一行第二列=12）一致；
• 秒数格式化：用padStart(2, '0')处理个位数秒数，确保生成两位字符串（如5秒转为'05'，反转后为'50'）；
• 结果展示：使用<pre>标签保留换行格式，让统计结果更易读。

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