Yup与React Hook Form结合Material UI输入验证首键异常问题

你当前的代码存在React本地受控状态与React Hook Form非受控注册逻辑的控制权冲突，这是触发首次按键吞字符、错误提示异常消失的核心原因：

• 代码中给两个TextField绑定了固定的value={formValues.xxx}属性，但全程没有配套的onChange事件更新对应的formValues状态——输入框处于“伪受控”状态，值始终被锁定在初始的空字符串上
• 同时通过inputRef={register}把字段注册到RHF的非受控管理逻辑中，两套状态系统共同操作同一个输入元素：提交触发校验、错误提示渲染导致组件重渲染时，React的伪受控绑定逻辑会拦截第一次键盘输入事件，把输入框值强制重置回硬编码的空初始值，因此第一次按键后输入框看不到任何内容
• 错误提示提前消失的逻辑来自RHF的默认行为：当注册字段接收到首次输入变更事件时，会自动清除对应字段的校验错误——因为第一次输入事件被伪受控逻辑拦截，实际字段值没有更新，错误就先被清空，后续输入就不会再走这个拦截逻辑，因此从第二次按键开始输入恢复正常。

方案1：适配现有RHF非受控模式（改动量最小） #

• 直接移除两个TextField上硬编码的value={formValues.username}/value={formValues.password}属性，既然已经通过inputRef={register}完成非受控注册，完全不需要自行维护formValues本地状态
• 移除冗余的formValues相关useState声明，将所有字段值的管理逻辑完全交给RHF处理，从根源上消除状态冲突
• 清理冗余校验逻辑：你已经配置了yupResolver，handleSubmit会在提交前自动执行完整的schema校验，走到onSubmit回调时拿到的data必然是符合规则的，不需要再手动调用schema.isValid(data)重复校验

方案2：保留本地受控状态管理的适配改造 #

如果确实需要用本地state同步表单值，需要给每个受控绑定的TextField补充对应的状态更新逻辑，保证value和状态值实时同步，示例写法：

<TextField
  autoFocus
  required
  fullWidth
  id="username"
  label="Username"
  name="username"
  inputRef={register}         
  helperText={errors.username?.message}
  value={formValues.username}
  onChange={(e) => setFormValues(prev => ({...prev, username: e.target.value}))}
/>

注：RHF 7及以上版本中，搭配Material UI这类组件库时，更推荐使用Controller组件包裹表单元素，相比直接透传inputRef的方案稳定性更高。

• 检查是否存在动态绑定的disabled属性意外拦截首次输入，从你贴出的代码片段来看，该场景出现概率较低
• 确认RHF与Material UI的版本兼容，避免版本不匹配导致的事件拦截异常

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