如何在React表格中实现每行输入框数值的求和功能？

要实现每行输入框的求和展示，你可以通过以下步骤修改代码：

1. 维护输入值状态：用useState创建状态存储所有输入框的值，结构对应每个店铺的月份输入，方便后续更新和计算。
2. 绑定输入变更事件：给每个输入框添加onChange事件，实时更新对应位置的输入值。
3. 计算每行总和：针对每个店铺，遍历其对应的输入值并累加得到总和。
4. 渲染总和：在每行的total单元格中展示计算结果。

修改后的完整代码如下：

import React, { useState } from "react";

export default function App() {
  const items = [
    { store: { name: "store a", id: 0 }, months: ["june", "july"] },
    { store: { name: "store b", id: 2 }, months: ["agust", "septm"] },
    { store: { name: "store c", id: 3 }, months: ["novem", "decemb"] },
  ];

  // 初始化输入值状态：key为店铺id，value为对应月份的输入值数组，默认全为0
  const [inputValues, setInputValues] = useState(() => {
    return items.reduce((acc, item) => {
      acc[item.store.id] = Array(item.months.length).fill(0);
      return acc;
    }, {});
  });

  // 处理输入框变更事件，自动转换输入为数字，非有效数字设为0
  const handleInputChange = (storeId, monthIndex, value) => {
    const numValue = isNaN(Number(value)) ? 0 : Number(value);
    setInputValues(prev => {
      return {
        ...prev,
        [storeId]: prev[storeId].map((val, idx) => 
          idx === monthIndex ? numValue : val
        )
      };
    });
  };

  // 计算指定店铺的输入值总和
  const calculateTotal = (storeId) => {
    return inputValues[storeId].reduce((sum, val) => sum + val, 0);
  };

  return (
    <table border="1"> {/* 添加border方便查看表格结构 */}
      {items.map((item) => {
        const storeId = item.store.id;
        return (
          <tr key={storeId}>
            <th>{item.store.name}</th>
            {item.months.map((month, i) => (
              <td key={i}>
                <input 
                  type="number" {/* 改为number类型更适配数字输入场景 */}
                  value={inputValues[storeId][i]}
                  onChange={(e) => handleInputChange(storeId, i, e.target.value)}
                />
              </td>
            ))}
            <td style={{ width: "100px" }}>total: {calculateTotal(storeId)}</td>
          </tr>
        );
      })}
    </table>
  );
}

关键细节说明： #

• 输入框改用number类型，既限制输入内容为数字，也优化了用户输入体验。
• 初始化状态时通过reduce生成与店铺月份数量匹配的数组，避免后续计算出现空值问题。
• 输入变更时自动校验并转换值为数字，确保求和逻辑不会因非数字输入出错。

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