在 react 中，直接在 `onchange` 中实时校验输入值的范围会导致用户无法完整输入数字（如输入 15 时，首字符 "1" 就被拦截），正确做法是延迟校验——使用 `onblur` 在输入完成后再验证，并对越界值自动修正或回退。
要实现一个受控 <input> 的数值范围约束（例如：floorsTo 必须满足 floorsFrom ≤ floorsTo ≤ floorsCount），关键在于区分“输入过程”与“输入确认”：
- ✅ onChange 应仅负责同步状态（允许任意中间输入，如 "1"、"15"、"150"），避免阻断用户输入流；
- ✅ onBlur 才是执行业务校验与修正的理想时机——此时用户已完成编辑，可安全解析并限制最终值。
✅ 正确实现示例
const [floorsFrom, setFloorsFrom] = useState<string>('');
const [floorsCount, setFloorsCount] = useState<string>('');
const [floorsTo, setFloorsTo] = useState<string>('');
// 辅助函数：安全解析整数，无效时返回 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 (
<div>
<input
className={cn(styles.textField)}
name="floorsFrom"
value={floorsFrom}
onChange={(e) => setFloorsFrom(e.target.value)}
placeholder="Min floors"
type="number" // 推荐使用 type="number" 配合 inputmode="numeric"
/>
<input
className={cn(styles.textField)}
name="floorsCount"
value={floorsCount}
onChange={(e) => setFloorsCount(e.target.value)}
placeholder="Max floors"
type="number"
/>
<input
className={cn(styles.textField)}
name="floorsTo"
value={floorsTo}
onChange={(e) => setFloorsTo(e.target.value)} // ✅ 仅同步，不限制
onBlur={handleFloorsToBlur} // ✅ 校验与修正在此发生
placeholder="Target floors"
type="number"
inputMode="numeric" // 移动端优化键盘
/>
</div>
);⚠️ 注意事项与最佳实践
- 不要依赖 type="text" + parseInt 做数值输入：改用 type="number" 可天然过滤非数字字符（除小数点和负号），减少解析负担；
- e.persist() 已废弃：现代 React（v17+）中事件对象无需手动持久化，可直接访问 e.target.value；
-
用户体验优化：
- 可在 onBlur 校验失败时添加视觉反馈（如边框变红、显示提示）；
- 若需更细粒度控制（如禁止粘贴越界值），可补充 onPaste 处理，但 onBlur 仍是主校验入口；
- 边界兼容性：确保 floorsFrom 和 floorsCount 本身也是有效数字——建议对其也添加 onBlur 校验或 useEffect 衍生约束。
通过将校验时机从 onChange 迁移至 onBlur，你既保障了输入流畅性，又严格实现了业务要求的数值区间约束，这是 React 表单开发中的经典权衡范式。
