如何对数量动态变化（可随月份天数调整）的输入框值进行求和

现存问题 #

• 求和函数getSum没有和输入框的变化事件绑定，输入值修改时不会触发计算逻辑，所以total不会更新
• 总计输入框使用defaultValue属性，仅第一次渲染时会赋值，后续total状态更新也不会同步到输入框
• 直接操作DOM读取输入值不符合React开发规范，动态调整输入框数量时维护成本高

完整修改方案 #

1. 状态定义部分

import { useState } from 'react';

// 工具函数：根据年月计算对应月份的天数
const getDaysByMonth = (year, month) => new Date(year, month, 0).getDate();

export default function MyComponent() {
  // 可根据业务逻辑动态修改当前年月
  const [currentYear, setCurrentYear] = useState(2024);
  const [currentMonth, setCurrentMonth] = useState(3);
  const [days, setDays] = useState(getDaysByMonth(currentYear, currentMonth));
  // 存储所有输入框的值
  const [inputValues, setInputValues] = useState(new Array(days).fill(0));
  const [total, setTotal] = useState(0);

2. 输入框渲染逻辑

const renderINP = () => {
    const tdList = [];
    for (let i = 0; i < days; i++) {
      tdList.push(
        <td key={i}>
          <input
            className="example"
            type="text"
            value={inputValues[i]}
            onChange={(e) => {
              // 更新当前输入框对应的值
              const newInputValues = [...inputValues];
              newInputValues[i] = parseFloat(e.target.value) || 0; // 非法输入默认按0计算
              setInputValues(newInputValues);
              // 实时计算总和
              const sum = newInputValues.reduce((prev, curr) => prev + curr, 0);
              setTotal(sum);
            }}
          />
        </td>
      );
    }
    return tdList;
  };

3. 动态切换月份逻辑（可选）

// 切换月份时自动调整输入框数量、重置输入值
  const handleMonthChange = (year, month) => {
    setCurrentYear(year);
    setCurrentMonth(month);
    const newDays = getDaysByMonth(year, month);
    setDays(newDays);
    const newInputValues = new Array(newDays).fill(0);
    setInputValues(newInputValues);
    setTotal(0);
  };

4. 组件渲染部分

return (
    <div>
      {/* 可自行添加月份选择器组件，选中时调用handleMonthChange即可 */}
      <table>
        <tbody>
          <tr>
            {renderINP()}
            <td>total<input id="total" type="text" value={total} readOnly /></td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

核心修改说明 #

1. 所有输入框改为React受控组件，输入值统一存在inputValues状态里，不需要操作DOM读取值
2. 每次输入时自动计算总和，实时更新total状态
3. 总计输入框改为value绑定total，支持状态变化时自动更新，加了readOnly避免用户手动修改总和
4. 输入框数量完全和days变量绑定，切换月份时调用handleMonthChange就能自动调整输入框数量

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