react-hook-form结合Material-UI时onBlur内修改输入值未生效

你当前实现的数值修正逻辑完全不生效，核心是机制冲突和逻辑顺序错误：

• RHF Controller 的单向数据流约束：RHF 托管的表单值存储在 hook 内部状态，通过 render 回调返回的 value prop 单向传递给被包裹的组件。直接修改 DOM 节点的 e.target.value 或 ref.current.value，既不会更新 RHF 内部的状态，还会在组件重渲染时被传入的受控 value 直接覆盖，修改的内容等于完全没生效
• 执行顺序错误：你先手动修改 DOM 值、再调用 RHF 提供的 onBlur，此时 RHF 的失焦校验读取的是内部存储的旧值，根本感知不到你临时修改的 DOM 值
• 存在逻辑冲突的前置代码：你写的 value={value || 0} 会把空输入的场景强行渲染为 0，而 0 小于设置的 minAge=16，会直接触发校验错误，和失焦修正的逻辑存在天然冲突

数值修正必须走 RHF 提供的受控更新通道，不能直接操作 DOM 节点：

• 失焦时先拿到当前输入的原始值，做类型转换和范围判断
• 对越界、非数字的值做区间收敛，通过 render 回调拿到的 onChange 方法把修正后的值同步到 RHF 内部状态
• 状态同步完成后，再调用 RHF 提供的 onBlur 触发内置规则校验
  修正后的核心 onBlur 代码：

onBlur={(e) => {
  const rawInput = e.target.value;
  // 空值直接进入失焦流程，交由required规则校验
  if (rawInput === '') {
    onBlur();
    return;
  }

  const currentValue = Number(rawInput);
  let correctedValue = currentValue;

  // 对非数字、低于最小值、高于最大值的输入做范围收敛
  if (Number.isNaN(currentValue) || currentValue < minAge) {
    correctedValue = minAge;
  } else if (currentValue > maxAge) {
    correctedValue = maxAge;
  }

  // 把修正后的值同步到RHF托管的表单状态
  onChange(correctedValue);
  // 触发RHF内置的失焦校验流程
  onBlur();
}}

• 把 TextField 上的 value={value || 0} 替换为 value={value ?? ''}，避免空值被强行替换为 0 导致的展示异常和校验错误
• 不需要手动操作 ref.current 或 DOM 节点的 value 属性，React 的受控渲染机制会自动把同步后的 RHF 状态同步到输入框展示上
• Controller 配置的 min/max/required 校验规则不需要改动，修正后的值会落在规则覆盖的区间内，不会再触发范围类的错误提示

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