React-Hook-Form结合Material-UI时TextField修改值未在OnSubmit中更新

我是React新手，在处理表单提交时遇到了问题。我使用React Material-UI、React-Hook-Form的Controller组件进行开发，当前程序有3个TextField，计算规则为：PendingTime=ActualTime-working time；其中ActualTime默认值为5。我为WorkTime TextField添加了onChange事件，修改WorkTime字段值时PendingTime会自动更新，但触发OnSubmit事件时，我无法获取ActualTime、WorkTimeValue、PendingTimeValue的最新值。

问题根源 #

你无法在onSubmit中拿到最新值的核心原因是：没有将输入框的修改同步到React-Hook-Form（以下简称RHF）内部维护的表单状态库，RHF的handleSubmit默认返回的是自身管理的表单值，而非你本地自定义useState存储的值，因此提交时永远只能拿到初始值。

解决步骤 #

• 移除本地维护ActualTime、WorkTime、PendingTime的useState逻辑，所有表单状态直接交给RHF管理，初始化时在useForm的defaultValues中设置初始值即可：

import { useForm, Controller } from "react-hook-form";
import { TextField, Button } from "@mui/material";

export default function FormDemo() {
  const { control, handleSubmit, setValue, getValues } = useForm({
    defaultValues: {
      ActualTime: 5, // 直接设置默认值
      WorkTime: 0,
      PendingTime: 5 // 初始值 = 5 - 0
    }
  });

• 改写WorkTime输入框的onChange逻辑，通过RHF提供的setValue方法同步修改两个关联字段的值，修改后的值会自动同步到RHF的状态库：

// WorkTime对应的Controller配置
<Controller
  name="WorkTime"
  control={control}
  render={({ field }) => (
    <TextField
      {...field}
      label="Work Time"
      type="number"
      onChange={(e) => {
        const workVal = Number(e.target.value) || 0;
        const pendingVal = getValues("ActualTime") - workVal;
        // 同步更新两个字段到RHF状态库
        setValue("WorkTime", workVal);
        setValue("PendingTime", pendingVal);
      }}
    />
  )}
/>

• ActualTime和PendingTime对应的Controller正常绑定field属性即可，如果ActualTime不允许用户修改可以添加disabled属性。
• 提交时直接从handleSubmit的回调参数中获取所有字段的最新值：

const onSubmit = (formData) => {
  // formData中已经包含三个字段的最新值
  console.log("提交数据：", formData);
  // 后续业务逻辑
};

// 表单提交按钮绑定
<Button onClick={handleSubmit(onSubmit)} variant="contained">提交</Button>

注意事项 #

所有表单字段的修改操作都要通过RHF提供的setValue/reset等API操作，不要使用本地自定义state同步表单值，避免出现页面展示和RHF内部状态不一致的问题。

内容的提问来源于stack exchange，提问作者Micro Kumar