React Hook Form字段计算异常求助：金额计算及提交值归零问题

核心问题分析 #

• 计算字段未实时更新：Total Amount和Balance的计算逻辑未监听依赖字段的变化，导致值无法随Charge Amount、Charge Count或Paid Amount的修改同步更新
• 提交时状态异常重置：提交逻辑中错误重置了Total Amount和Paid Amount的状态值，导致提交后数值变为0
• Paid Amount状态绑定失效：输入框的状态关联逻辑存在问题，无法正确捕获并保存用户输入的Paid Amount值

具体修复步骤 #

1. 正确管理字段状态与计算逻辑 #

通过useState维护所有字段状态，并用useEffect监听依赖字段变化，实时更新计算值：

import { useState, useEffect } from "react";

function MyForm() {
  // 初始化可输入字段的默认值
  const [chargeAmount, setChargeAmount] = useState(120);
  const [chargeCount, setChargeCount] = useState(1);
  const [paidAmount, setPaidAmount] = useState(0);
  // 初始化计算字段的默认值
  const [totalAmount, setTotalAmount] = useState(120);
  const [balance, setBalance] = useState(120);

  // 监听Charge Amount和Charge Count变化，更新Total Amount及Balance
  useEffect(() => {
    const calculatedTotal = chargeAmount * chargeCount;
    setTotalAmount(calculatedTotal);
    setBalance(calculatedTotal - paidAmount);
  }, [chargeAmount, chargeCount]);

  // 监听Paid Amount变化，更新Balance
  useEffect(() => {
    setBalance(totalAmount - paidAmount);
  }, [paidAmount, totalAmount]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 提交时直接使用当前状态值，避免错误重置
    console.log({ chargeAmount, chargeCount, totalAmount, paidAmount, balance });
    // 如需重置表单，仅重置可输入字段，计算字段会自动更新
    // setChargeAmount(120);
    // setChargeCount(1);
    // setPaidAmount(0);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Charge Amount:</label>
        <input
          type="number"
          value={chargeAmount}
          onChange={(e) => setChargeAmount(Number(e.target.value))}
        />
      </div>
      <div>
        <label>Charge Count:</label>
        <input
          type="number"
          value={chargeCount}
          onChange={(e) => setChargeCount(Number(e.target.value))}
        />
      </div>
      <div>
        <label>Total Amount:</label>
        <input type="number" value={totalAmount} readOnly />
      </div>
      <div>
        <label>Paid Amount:</label>
        <input
          type="number"
          value={paidAmount}
          onChange={(e) => setPaidAmount(Number(e.target.value))}
        />
      </div>
      <div>
        <label>Balance:</label>
        <input type="number" value={balance} readOnly />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

2. 修复提交逻辑 #

• 提交时直接读取当前状态值，不要对Total Amount和Paid Amount执行重置操作
• 若需重置表单，仅重置Charge Amount、Charge Count、Paid Amount这三个可输入字段，Total Amount和Balance会通过useEffect自动重新计算

3. 保证输入类型一致性 #

所有数字输入字段的onChange事件中，需将输入的字符串值转换为Number类型，避免字符串拼接导致计算错误

关键说明 #

• 计算字段（Total Amount、Balance）设置为readOnly，禁止用户手动修改，确保值始终由逻辑计算生成
• 通过useEffect监听依赖字段的变化，保证计算值实时同步更新
• 所有数字字段的状态统一使用Number类型存储，避免类型不匹配引发的计算异常

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