react-hook-form搭配material-ui触发校验后首字符输入失效如何解决

问题根因定位 #

你遇到的两个问题（首字符输入丢失、MUI label重叠），本质都是写代码时混用了react-hook-form的非受控模式和手动绑定的假受控组件逻辑，具体触发逻辑链条：

• RHF 默认走非受控取值逻辑，通过register拿到原生input的DOM引用读值，本身不会强行拦截输入框的value变更
• 你手动给MUI TextField绑了value={formState.surname || ""}，但没有给这个绑定关系配对应的onChange回调——输入框变成了没有状态更新通道的假受控组件，只要组件触发重渲染，输入框的显示值就会被强制拉回formState.surname的旧值（也就是空值）
• 点击提交触发必填校验后，RHF的formState更新会触发组件重渲染，你刚敲下第一个字符时，临时输入的值还没来得及同步到RHF的内部状态，重渲染就把输入框的value强制覆盖成空，表现出来就是第一个字符永远输不进去
• 你之前遇到的label重叠问题，是因为手动绑的value一直是空值，MUI感知不到输入框的实际内容，就不会触发label向上浮动的逻辑，才会和占位内容发生重叠。

对应解决方法 #

方案1：优先适配RHF原生非受控模式（性能最优） #

完全去掉手动绑的硬编码value值，从根源避免重渲染覆盖输入值的问题，同时解决label重叠：

• 删除原来手动写的value={formState.surname || ""} 这行代码
• 把RHF的register返回的ref，挂到MUI TextField的inputRef属性上，让RHF能正常读取原生input的值
• 给TextField加InputLabelProps={{ shrink: true }}，强制label始终保持在输入框上方的浮动位置，不需要靠空值兜底逻辑就能彻底避免重叠问题

这种模式下输入框完全走RHF的非受控取值流程，没有额外的状态同步开销，也不会出现输入值被重渲染重置的问题。

方案2：适配RHF受控模式（适合需要实时联动的场景） #

如果需要输入时实时触发校验、联动其他表单项，就不要混用非受控逻辑，直接用RHF官方提供的Controller组件包裹MUI TextField：

• 删除所有手动绑value、手动挂ref的逻辑
• 通过Controller的render回调拿到RHF同步好的field对象，把field的onChange/onBlur/value/ref属性完整透传给TextField
• 这种模式下输入的字符会通过onChange第一时间同步到RHF的内部状态，重渲染时拿到的value就是最新的输入值，不会出现首字符丢失的问题。

通用踩坑提醒：只要是在RHF的表单里给第三方UI输入组件绑值，绝对不要在没有配置对应onChange同步逻辑的情况下手动传静态value，否则一定会出现输入值被重渲染覆盖的异常。

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