无法在staydays>1时将Total Advance输入框值改至mainRate以下

当入住天数staydays大于1时，「Total Advance（总预付款）」输入框无法修改到低于基础费率mainRate的数值。比如mainRate为990，计算出的总预付款是2990，此时输入框的值没法改到990以下；但staydays为1时可以正常编辑。

问题根源 #

当前输入框是受控组件，value属性由动态公式生成：

• 当staydays>1时，value = 房间数*mainAvanceRate + 房间数*mainRate*(staydays-1)
• 用户修改输入框时，onChange会把输入值除以房间数更新mainAvanceRate
• 但组件重新渲染时，又会用上述公式计算value，其中房间数*mainRate*(staydays-1)是固定正数，导致最终value永远大于等于房间数*mainRate，用户无法输入更低数值。

修复方案 #

把总预付款的状态单独存储，不再依赖mainAvanceRate和其他值动态计算，让输入框直接绑定这个独立状态，同时按需处理初始化和联动逻辑。

修改后的代码示例 #

import { useState, useEffect } from 'react';

// 假设已有其他状态：staydays, roomno, mainRate, mainAvanceRate
const [totalAdvance, setTotalAdvance] = useState(0);

// 初始化或依赖项变化时，计算默认总预付款
useEffect(() => {
  const defaultTotal = Number(staydays) > 1 
    ? roomno.length * mainAvanceRate + roomno.length * Number(mainRate) * Number(staydays - 1)
    : roomno.length * mainAvanceRate;
  setTotalAdvance(defaultTotal);
}, [staydays, roomno.length, mainAvanceRate, mainRate]);

// 渲染输入框
return (
  <>
    <p>Total Advance</p>
    <input
      style={{ width: "4rem" }}
      type="text"
      value={totalAdvance}
      name="totalAdvance"
      onChange={(e) => {
        // 直接更新总预付款状态
        setTotalAdvance(e.target.value);
        // 按需同步更新mainAvanceRate，做非负校验避免异常值
        if (Number(staydays) > 1) {
          const calculatedAvance = (Number(e.target.value) - roomno.length * Number(mainRate) * Number(staydays - 1)) / roomno.length;
          setmainAvanceRate(calculatedAvance >= 0 ? calculatedAvance : 0);
        } else {
          setmainAvanceRate(Number(e.target.value) / roomno.length);
        }
      }}
    />
  </>
);

代码说明 #

1. 新增totalAdvance状态，专门存储用户输入的总预付款值，输入框直接绑定该状态，用户修改能实时生效。
2. 用useEffect监听依赖项变化，自动计算并更新默认总预付款，保证初始值符合业务逻辑。
3. onChange中先更新totalAdvance，如需同步mainAvanceRate则根据staydays反向计算，同时做非负校验避免出现异常负值。

修改后无论staydays是1还是大于1，用户都能自由修改总预付款，同时可保留和mainAvanceRate的联动逻辑。

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