React开发求助：实现带回溯的实时数字平方列表展示功能

核心实现思路 #

• 用字符串维护输入值（便于退格时截取操作），搭配状态管理存储输入值和计算结果数组
• 输入变化时过滤非数字字符，限制输入长度不超过10位（对应最多10次计算），实时生成每一步的平方结果
• 监听退格键，截取输入字符串并重新计算所有结果，同步更新输入框和结果列表

完整代码实现 #

import { useState } from 'react';

function SquareCalculator() {
  const [inputValue, setInputValue] = useState('');
  const [results, setResults] = useState([]);

  // 生成结果数组：根据输入字符串的每一段前缀计算平方
  const generateResults = (value) => {
    const newResults = [];
    for (let i = 1; i <= value.length; i++) {
      const num = parseInt(value.slice(0, i), 10);
      newResults.push(num * num);
    }
    return newResults;
  };

  const handleInputChange = (e) => {
    const rawValue = e.target.value;
    // 过滤非数字字符
    const numericValue = rawValue.replace(/\D/g, '');
    
    if (numericValue.length > 10) {
      alert('最多允许10次计算，请停止输入');
      return;
    }

    setInputValue(numericValue);
    setResults(generateResults(numericValue));
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Backspace' && inputValue.length > 0) {
      const newValue = inputValue.slice(0, -1);
      setInputValue(newValue);
      setResults(generateResults(newValue));
    }
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        onKeyDown={handleKeyDown}
        placeholder="输入数字..."
      />
      <ul>
        {results.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

export default SquareCalculator;

关键代码说明 #

1. 状态管理：inputValue存储纯数字输入字符串，results存储每一步的平方结果
2. 结果生成函数：generateResults遍历输入字符串的所有前缀（从第1位到第n位），计算每个前缀数字的平方，生成结果数组，比如输入"321"会生成[9, 1024, 103041]
3. 输入处理：handleInputChange过滤非数字输入，限制长度不超过10，超过时弹出提示；同步更新输入值和结果数组
4. 退格处理：handleKeyDown监听退格键，截取输入字符串的前length-1位，调用generateResults重新计算所有结果，确保退格后结果完全匹配当前输入
5. 渲染逻辑：输入框绑定输入和键盘事件，列表实时渲染results中的每一项

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