在 react 中，直接在 `onchange` 中实时校验输入值的范围会导致用户无法完整输入数字（如输入“15”时，“1”被拦截），正确做法是改用 `onblur` 进行最终校验，并结合受控组件逻辑确保值始终在指定范围内。
在 React 表单开发中，若需对 实现类似 min/max 的数值范围约束（例如：第三个输入框的值必须 ≥ 第一个输入框且 ≤ 第二个输入框），切忌在 onChange 中逐字符拦截非法值——这会破坏用户体验，尤其在输入多位数时（如从 10 到 15，输入 '1' 时即因 1
✅ 正确方案：延迟校验 + 受控回退
将范围校验逻辑移至 onBlur 事件，在用户完成输入并失焦时统一验证。若值越界，则自动恢复至上一次合法值；若合法，则更新状态：
久久企业网站后台管理系统1.0
下载
一、功能简介本软件完全适应大、中、小型网站建设需要，让您用很便宜的虚拟主机空间也可以开通4个独立的网站！久久企业网站后台管理系统各种版本开发基础架构均为php+mysql+div+css+伪静态，迎合搜索引擎排名的喜好。另外值得一提的是本站特色的TAG系统可为您的网站做出无限分类，不用任何设置全站ULR伪静态！本建站系统除了有产品发布、新闻（软文）发布、订单管理系统和留言反馈等一些最基本的功能之外
const [floorsFrom, setFloorsFrom] = useState(''); const [floorsCount, setFloorsCount] = useState (''); const [inputVal, setInputValue] = useState (''); // 失焦时校验并修正 const handleFloorsToBlur = (e: React.FocusEvent ) => { 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)); } // 合法值：保持原输入（无需额外操作） }; // 渲染受控输入框 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 承担业务校验与自动修正职责——既保障交互流畅性，又确保数据合法性。
