本文介绍在 react 中实现文本输入框数值范围校验的正确方法，重点解决 `onchange` 实时拦截导致多数字输入失败的问题，并提供基于 `onblur` 的健壮方案及完整代码示例。
在 React 中，直接在 的 onChange 中对用户输入进行实时数值范围校验（如限制输入值必须介于 floorsFrom 和 floorsCount 之间）会导致严重交互问题：当用户尝试输入多位数（例如从 10 到 15）时，输入 1 的瞬间即被判定为非法（因 1
根本原因在于：onChange 触发过于频繁，且发生在输入未完成时；而数值比较应基于完整的、用户意图表达的数字，而非中间态字符串。
✅ 正确做法是将范围校验逻辑移至 onBlur（失焦时），允许用户自由输入完整内容，仅在确认提交意图时进行校验与修正：
<input
className={cn(styles.textField)}
name="floorsTo"
value={inputVal}
onChange={(e) => setInputValue(e.target.value)} // 纯粹同步输入，不校验
onBlur={() => {
const num = parseInt(inputVal, 10);
const min = parseInt(floorsFrom, 10);
const max = parseInt(floorsCount, 10);
// 校验是否为有效数字且在范围内
if (!isNaN(num) && num >= min && num <= max) {
// 合法：保留当前值
return;
}
// 非法：回退到上一个合法值（可选：也可设为边界值）
const fallback = isNaN(num) ? '' : num < min ? String(min) : String(max);
setInputValue(fallback);
}}
type="text"
/>? 关键注意事项：
- 使用 parseInt(value, 10) 显式指定十进制，避免八进制误解析；
- 优先检查 isNaN()，防止空字符串或非数字输入引发 NaN 比较错误；
- onBlur 校验更符合用户心智模型（输入完成后再验证），兼顾体验与数据一致性；
- 如需更强约束（如禁止键盘输入非法字符），可配合 onKeyPress 过滤非数字键，但仍不应替代 onBlur 的最终校验；
- 若需实时反馈（如红框提示），可在 onBlur 后设置校验状态，而非阻断输入。
总结：React 表单控制的核心原则是「输入自由，提交受控」。用 onChange 无条件同步状态，用 onBlur 或表单提交时做业务校验，才能构建既健壮又友好的用户体验。
