在 react 中，直接在 `onchange` 中实时校验输入值的范围会导致用户无法完整输入数字（如输入“15”时，“1”被拦截），正确做法是改用 `onblur` 进行最终校验，并结合受控组件逻辑确保值始终在指定范围内。
在 React 表单开发中，若需对 <input type="text"> 实现类似 min/max 的数值范围约束（例如：第三个输入框的值必须 ≥ 第一个输入框且 ≤ 第二个输入框），切忌在 onChange 中逐字符拦截非法值——这会破坏用户体验，尤其在输入多位数时（如从 10 到 15，输入 '1' 时即因 1 < 10 被阻止，导致无法继续输入）。
✅ 正确方案：延迟校验 + 受控回退
将范围校验逻辑移至 onBlur 事件，在用户完成输入并失焦时统一验证。若值越界，则自动恢复至上一次合法值；若合法，则更新状态：
const [floorsFrom, setFloorsFrom] = useState<string>('');
const [floorsCount, setFloorsCount] = useState<string>('');
const [inputVal, setInputValue] = useState<string>('');
// 失焦时校验并修正
const handleFloorsToBlur = (e: React.FocusEvent<HTMLInputElement>) => {
const value = e.target.value.trim();
const num = Number(value);
// 非数字或空值 → 清空
if (!value || isNaN(num)) {
setInputValue('');
return;
}
const min = Number(floorsFrom) || 0;
const max = Number(floorsCount) || Infinity;
if (num < min) {
setInputValue(String(min));
} else if (num > max) {
setInputValue(String(max));
}
// 合法值：保持原输入（无需额外操作）
};
// 渲染受控输入框
<input
className={cn(styles.textField)}
name="floorsTo"
value={inputVal}
onChange={(e) => setInputValue(e.target.value)} // 仅同步输入，不校验
onBlur={handleFloorsToBlur}
type="text"
placeholder="请输入楼层范围"
/>⚠️ 注意事项：
- 不要移除 e.persist()：现代 React（v17+）已废弃该方法，可安全删除；
- 避免 parseInt('') 报错：务必先 trim() 并检查空字符串，再转数字；
- 边界兼容性：建议使用 Number() 替代 parseInt()，它对空字符串返回 NaN，更易判断；
- 用户体验增强：可配合 onKeyDown 禁止非数字键（如 e.key.match(/^[0-9]$/) || e.key === 'Backspace'），但不可替代 onBlur 校验；
- 类型安全：若使用 TypeScript，建议将 floorsFrom/floorsCount 声明为 string | number，并在计算前做类型防护。
总结：React 文本输入的范围控制本质是「宽松输入 + 严格提交」。onChange 应专注数据同步，onBlur 承担业务校验与自动修正职责——既保障交互流畅性，又确保数据合法性。
