React Hook Form字段计算

Question

我有带以上字段的表格
1-费用金额默认值=120
2-费用计数默认值=1
3-总金额=费用金额*费用计数
4-已支付金额
5-余额=总金额-已支付金额

[代码沙盒]https://codesandbox.io/s/little-dust-s7v9k8?file=/src/MyForm/MyForm.tsx

我尝试了以上代码，但支付金额和余额不起作用
提交表格时，支付金额和总金额变为零

Answer 1

您可以使用useEffect并根据以下输入计算最终值：

useEffect(() => {
const calculate = () => {
console.log("calculate");
const amount = values.paidAmount;
const balance =
values.chargeAmount * values.chargeCount - parseFloat(amount || "0");
if (balance !== values.balance) {
setValue("balance", balance);
}
};
calculate();
}, [values, setValue]);

示例：演示