在 React 中，可通过原生 min 属性结合 onChange 事件实时校验并修正输入值，确保用户无法提交或保留低于最小值的数字，无需复杂自定义验证逻辑。
在 react 中，可通过原生 `min` 属性结合 `onchange` 事件实时校验并修正输入值，确保用户无法提交或保留低于最小值的数字，无需复杂自定义验证逻辑。
在 React 函数组件中，为 <input type="number"> 设置最小值，最简洁可靠的方式是组合使用 HTML 原生 min 属性与受控组件模式下的 onChange 处理逻辑。虽然 min 属性本身能约束表单提交（如点击提交按钮或回车时触发浏览器默认验证），但它不会阻止用户手动输入小于 min 的值（例如直接键入 2），此时输入框视觉上仍显示非法值，可能引发后续业务逻辑错误。
因此，推荐采用「受控输入 + 实时修正」方案：
function NumberInputWithMin() {
const [value, setValue] = useState<number | ''>(5);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const num = parseFloat(e.target.value);
// 若输入为空、非数字或小于 min，则设为最小值（此处 min = 5）
if (isNaN(num) || num < 5) {
setValue(5);
} else {
setValue(num);
}
};
return (
<input
type="number"
min="5"
value={value}
onChange={handleChange}
placeholder="请输入 ≥5 的数字"
/>
);
}✅ 关键优势：
- 完全受控：状态与 UI 严格同步，避免 DOM 值与 React 状态不一致；
- 即时响应：用户输入瞬间修正（如输入 3 → 自动变为 5），体验流畅；
- 语义清晰：min="5" 仍保留在 DOM 中，支持无障碍访问及原生表单验证提示；
- 无副作用：不依赖 setCustomValidity 或手动 DOM 操作，符合 React 声明式范式。
⚠️ 注意事项：
- 避免仅用 onBlur 修正——用户可能在失焦前已触发其他操作（如快速提交）；
- parseFloat 可正确处理空字符串（返回 NaN）和小数输入；若需整数限制，可改用 Math.floor 或 Math.round 配合 step="1"；
- 如需国际化或复杂校验（如动态 min 值），建议封装为自定义 Hook（如 useClampedNumber）提升复用性。
综上，min 属性 + onChange 中 Math.max(parseFloat(value), min) 实时赋值，是兼顾简洁性、健壮性与 React 最佳实践的首选方案。
