本文介绍在 react 中使用受控组件实现纯数字输入的正确方法，重点解决 `input type="number"` 允许输入连字符“-”的问题，并提供兼容性好、体验佳的纯文本+正则过滤方案。
在 React 中，直接使用 虽然语义清晰，但存在一个常见陷阱：浏览器允许用户输入负号（-）甚至字母 e（科学计数法），且无法通过 onKeyPress 或 onInput 完全拦截——尤其在 macOS Safari 或部分 Android 键盘上，连字符可能在 onChange 触发前已短暂显示或导致值异常。
因此，推荐采用 type="text" + inputMode="numeric" + 受控输入 + 正则过滤 的组合方案，兼顾兼容性、可访问性和用户体验。
✅ 推荐实现（支持全平台，禁止 -、.、e、空格等一切非数字字符）
import { useState, useCallback } from 'react';
function NumberInput() {
const [value, setValue] = useState<string>('');
const handleChange = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
// 仅保留纯数字字符（0–9），删除所有其他字符（含 -、.、e、空格、字母等）
const cleaned = evt.target.value.replace(/[^0-9]/g, '');
setValue(cleaned);
}, []);
return (
<input
type="text"
inputMode="numeric" // 提示移动端弹出数字键盘
pattern="[0-9]*" // 增强表单验证语义（非强制，但建议保留）
value={value}
onChange={handleChange}
placeholder="请输入数字"
aria-label="仅允许输入数字"
/>
);
}
export default NumberInput;? 关键说明
- inputMode="numeric"：向浏览器声明期望输入数字，多数移动端会优先调出数字键盘（比 type="number" 更可靠）；
- pattern="[0-9]*"：配合 HTML5 表单验证，在提交时提供基础校验提示（不影响实时过滤）；
- 正则 /[^0-9]/g：精准匹配并移除所有非 ASCII 数字字符，彻底杜绝 -、+、.、e、E、中文数字、符号等干扰；
- 使用 useCallback 避免 onChange 回调频繁重建，提升性能；
- aria-label 和语义化属性确保无障碍支持。
⚠️ 注意事项
- ❌ 不要依赖 type="number" 的原生行为来“保证数字”——它不阻止 - 输入，也无法防止粘贴非法内容（如 "123abc-456"）；
- ❌ 避免使用 event.target.value = newValue 手动赋值（如原代码所示），这会破坏 React 受控组件一致性，可能导致状态与 DOM 不同步；
- ✅ 若需支持小数，应改用更严谨逻辑（如允许最多一个 .，且不能在开头/结尾），但本例聚焦「纯整数」场景；
- ✅ 如需限制位数（如最多 6 位），可在 cleaned 后追加 cleaned.slice(0, 6)。
通过该方案，你将获得一个真正只接受 0–9 的健壮数字输入框，彻底规避连字符及其他特殊字符的干扰，同时保持良好的跨端体验与可维护性。
