如何在 React 中为 TextField 设置最小值和最大值约束

在 react 中，直接在 `onchange` 中实时校验输入值的范围会导致用户无法完整输入数字（如输入 15 时，首字符 “1” 就被拦截），正确做法是延迟校验——使用 `onblur` 在输入完成后再验证，并对越界值自动修正或回退。

要实现一个受控 的数值范围约束（例如：floorsTo 必须满足 floorsFrom ≤ floorsTo ≤ floorsCount），关键在于区分“输入过程”与“输入确认”：

• ✅ onChange 应仅负责同步状态（允许任意中间输入，如 “1”、”15″、”150″），避免阻断用户输入流；
• ✅ onBlur 才是执行业务校验与修正的理想时机——此时用户已完成编辑，可安全解析并限制最终值。

✅ 正确实现示例

const [floorsFrom, setFloorsFrom] = useState(''); const [floorsCount, setFloorsCount] = useState(''); const [floorsTo, setFloorsTo] = useState('');  // 辅助函数：安全解析整数，无效时返回 null const parseSafeInt = (str: string): number | null => {   const num = parseInt(str, 10);   return isNaN(num) ? null : num; };  // 处理 floorsTo 的 onBlur —— 核心校验逻辑 const handleFloorsToBlur = () => {   const from = parseSafeInt(floorsFrom);   const to = parseSafeInt(floorsTo);   const count = parseSafeInt(floorsCount);    if (from === null || count === null || to === null) {     // 输入为空或非法，可选择清空或保留原值     setFloorsTo('');     return;   }    // 修正为合法区间内的最接近值   const clamped = Math.min(Math.max(to, from), count);   setFloorsTo(clamped.toString()); };  return (   
      setFloorsFrom(e.target.value)}       placeholder="Min floors"       type="number" // 推荐使用 type="number" 配合 inputmode="numeric"     />       setFloorsCount(e.target.value)}       placeholder="Max floors"       type="number"     />       setFloorsTo(e.target.value)} // ✅ 仅同步，不限制       onBlur={handleFloorsToBlur}                    // ✅ 校验与修正在此发生       placeholder="Target floors"       type="number"       inputMode="numeric" // 移动端优化键盘     />   
 );

⚠️ 注意事项与最佳实践

• 不要依赖 type=”text” + parseInt 做数值输入：改用 type=”number” 可天然过滤非数字字符（除小数点和负号），减少解析负担；
• e.persist() 已废弃：现代 react（v17+）中事件对象无需手动持久化，可直接访问 e.target.value；
• 用户体验优化：
  • 可在 onBlur 校验失败时添加视觉反馈（如边框变红、显示提示）；
  • 若需更细粒度控制（如禁止粘贴越界值），可补充 onPaste 处理，但 onBlur 仍是主校验入口；
• 边界兼容性：确保 floorsFrom 和 floorsCount 本身也是有效数字——建议对其也添加 onBlur 校验或 useEffect 衍生约束。

通过将校验时机从 onChange 迁移至 onBlur，你既保障了输入流畅性，又严格实现了业务要求的数值区间约束，这是 React 表单开发中的经典权衡范式。