onChange触发时自动拆分输入数值到其他输入框且总和不超设定值

核心功能要求 #

• 任意输入框触发onChange输入数值时，自动将总数值的剩余部分平均分配到其余输入框
• 所有输入框数值总和严格不超过预设的总数值
• 示例场景：3个输入框、总数值预设为100时，任意输入框输入50，剩余2个输入框自动填充25，总和刚好为100

实现逻辑 #

1. 提前配置固定总数值和输入框数量，初始化时所有输入框默认填充平均值
2. 监听每个输入框的变更事件，获取当前修改的输入框索引和输入值，先做边界校验：输入值不能小于0，不能超过总数值
3. 计算剩余可分配数值，将其平均分配给其余未被修改的输入框，可根据需求保留指定小数位数
4. 增加兜底校验，避免小数精度问题导致总和超过预设的总数值

核心代码示例（React） #

import { useState } from 'react';

const DEFAULT_TOTAL = 100; // 可自定义总数值
const INPUT_COUNT = 3; // 可自定义输入框数量

export default function App() {
  // 初始化输入框数值，默认平均分配
  const [values, setValues] = useState(
    Array(INPUT_COUNT).fill(DEFAULT_TOTAL / INPUT_COUNT)
  );

  const handleInputChange = (index, e) => {
    const inputVal = Number(e.target.value);
    // 输入值边界校验
    const validVal = Math.max(0, Math.min(inputVal, DEFAULT_TOTAL));
    const newValues = [...values];
    newValues[index] = validVal;

    // 计算剩余可分配数值
    const remaining = DEFAULT_TOTAL - validVal;
    const otherCount = INPUT_COUNT - 1;
    const perValue = otherCount > 0 ? Number((remaining / otherCount).toFixed(2)) : 0;

    // 给其余输入框赋值
    for (let i = 0; i < newValues.length; i++) {
      if (i !== index) {
        newValues[i] = perValue;
      }
    }

    // 兜底处理小数精度问题
    const sum = newValues.reduce((acc, curr) => acc + curr, 0);
    if (sum > DEFAULT_TOTAL) {
      newValues[newValues.length - 1] = Number((newValues[newValues.length - 1] - (sum - DEFAULT_TOTAL)).toFixed(2));
    }

    setValues(newValues);
  };

  return (
    <div className="App">
      <h3>预设总数值：{DEFAULT_TOTAL}</h3>
      {values.map((val, idx) => (
        <div key={idx} style={{ margin: '10px 0' }}>
          <label>输入框{idx + 1}：</label>
          <input
            type="number"
            value={val}
            onChange={(e) => handleInputChange(idx, e)}
            min="0"
            max={DEFAULT_TOTAL}
          />
        </div>
      ))}
      <p>当前所有输入框总和：{values.reduce((acc, curr) => acc + curr, 0).toFixed(2)}</p>
    </div>
  );
}

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