使用react-hook-form的setValue更新Material-UI TextField时值偶发为空、标签不浮动

问题核心诱因 #

• 输入框偶发显示空值：本质是值同步链路断裂。react-hook-form 依靠绑定到真实 input 节点的 ref 定位目标元素，如果自定义封装组件没有正确透传 ref，调用 setValue 时就可能找不到目标 DOM 节点，赋值动作静默失败；另外如果 setValue 调用时没有开启状态同步配置，组件的受控显示值也可能和表单内存值脱节，出现表单内部存了值但输入框显示空的情况。
• 标签不触发浮动收缩：MUI TextField 的浮动标签逻辑，是依靠内部检测传入的 value 是否非空、input 元素是否被聚焦来触发的。如果自定义组件透传给 TextField 的 value 没有正确同步表单值，MUI 内部检测不到非空值存在，就不会触发标签上移收缩的交互。

可落地修复步骤 #

• 做好 ref 转发透传
  用 React.forwardRef 包裹自定义封装的 TextField 组件，把外部传入的 ref 直接绑定到 MUI TextField 的 inputRef 属性上，确保 react-hook-form 能直接拿到真实 input DOM 节点的引用，不会因为组件封装的层级隔断丢失 ref 定位能力。
• 调用 setValue 时补充必要配置
  不要只传字段名和值两个参数，要带上状态同步配置：
  setValue('目标字段名', 传入的新值, { shouldTouch: true, shouldDirty: true })
  其中 shouldTouch: true 会把对应字段标记为已交互状态，能直接触发 MUI 内部的标签状态更新逻辑，解决标签不浮动的问题。
• 修正受控值传递的截断逻辑
  不要在自定义组件内部写类似 value={value || ''} 的兜底逻辑，这类逻辑会把合法的 0、false 等 falsy 类型的合法值强制转成空字符串，既会导致显示值不符合预期，也会让 MUI 误判断输入框为空，无法触发标签浮动。

高频踩坑提醒 #

• 不要在自定义组件内部拦截 onChange 事件，要把 react-hook-form 通过 Controller 传入的 onChange 方法原样透传到 MUI TextField 的对应属性上，不要在中间层做事件拦截、自定义值加工，避免打断值的双向同步链路。
• 用 Controller 包裹自定义组件时，要把 Controller 返回的完整 field 对象的 value、onChange 属性直接透传给内部的 MUI TextField，不要在封装组件里单独维护和表单状态脱钩的本地 state，避免出现状态不同步的偶发问题。

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