输入值总和需限制为指定数值，如何修正当前输入限制逻辑？

原逻辑的核心问题是：当用户输入新值时，直接限制当前输入不超过剩余额度，而没有考虑优先保留当前输入、调整其他输入来维持总和上限。要实现你想要的效果（输入3时保留该值，同时让总和维持在6），需要修改逻辑，优先满足当前输入，再调整其他输入框的数值。

修正后的代码实现 #

// 先修正useEffect的依赖，确保pieceCount能正确同步所有输入的总和
useEffect(() => {
    const count = watchAllInputs.reduce((acc, current) => {
        return acc + Number(current.productPiece || 0); // 处理空值情况
    }, 0);
    setPieceCount(count);
}, [watchAllInputs]); // 依赖改为完整的watchAllInputs，确保任何输入变化都更新总和


const handleAmountOnChange = (value) => {
    const amount = data[0].amount; // 这里是设定的上限6
    const inputValue = Number(value.target.value) || 0;
    const oldValue = Number(watch(`requirement.${index}.productPiece`)) || 0;
    
    // 计算如果设置当前输入为inputValue后的总和
    const newTotal = pieceCount - oldValue + inputValue;
    
    if (newTotal <= amount) {
        // 总和没超，直接设置当前输入值
        setValue(`requirement.${index}.productPiece`, inputValue);
        return;
    }
    
    // 总和超出，计算超出部分
    const excess = newTotal - amount;
    // 复制一份输入数组，避免直接修改原数据
    const updatedInputs = [...watchAllInputs];
    
    // 先设置当前输入为目标值
    updatedInputs[index] = {
        ...updatedInputs[index],
        productPiece: inputValue
    };
    
    // 从其他输入框中减去超出部分，优先调整非当前的、有值的输入框
    let remainingExcess = excess;
    for (let i = 0; i < updatedInputs.length && remainingExcess > 0; i++) {
        if (i === index) continue; // 跳过当前输入框
        const currentPiece = Number(updatedInputs[i].productPiece) || 0;
        if (currentPiece <= 0) continue; // 跳过无值的输入框
        
        // 计算能从当前输入框减去的最大值（不小于0）
        const subtract = Math.min(remainingExcess, currentPiece);
        updatedInputs[i] = {
            ...updatedInputs[i],
            productPiece: currentPiece - subtract
        };
        remainingExcess -= subtract;
    }
    
    // 批量更新所有输入框
    updatedInputs.forEach((item, idx) => {
        setValue(`requirement.${idx}.productPiece`, item.productPiece);
    });
};

逻辑说明 #

1. 修正总和计算的依赖：将useEffect的依赖改为watchAllInputs，确保任何输入框的数值变化都能实时更新pieceCount，避免总和计算滞后。
2. 计算新总和：先算出如果保留当前输入值后的总和，判断是否超出上限。
3. 处理超出情况：
   • 先将当前输入框设置为用户输入的值
   • 遍历其他输入框，从有值的输入框中减去超出的部分，直到总和回到上限
   • 批量更新所有输入框的数值，确保总和始终不超过设定的上限

这样就能实现你想要的效果：输入4后，再输入3时，当前输入框保留3，第一个输入框的4会被调整为3，总和维持6。

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