本文介绍在 react 中通过受控组件和正则过滤，严格限制 `` 仅接受纯阿拉伯数字（0–9），彻底禁用负号（-）、小数点（.）、字母、空格及其他任何特殊字符的完整实践方案。
在 React 中， 原生虽支持数字验证，但仍允许用户输入负号（-）和小数点（.），甚至可通过粘贴、开发者工具等方式绕过限制。若业务场景要求绝对只接受无符号整数（如手机号、验证码、ID 编号），必须放弃 type="number"，改用 type="text" 配合受控组件 + 输入实时清洗。
✅ 正确做法是：
- 使用 type="text"（避免原生 number 行为干扰）；
- 设置 inputMode="numeric"（移动端唤起数字键盘，提升体验）；
- 在 onChange 中对 event.target.value 执行严格正则替换，仅保留 0–9；
- 使用 useState 管理受控值，确保视图与状态严格同步。
以下是推荐实现（已修复原代码中的关键错误）：
import { useState, useCallback } from 'react';
function NumberOnlyInput() {
const [value, setValue] = useState('');
const handleChange = useCallback((evt: React.ChangeEvent) => {
// ✅ 仅保留数字字符：匹配所有非数字字符并替换为空字符串
const cleaned = evt.target.value.replace(/[^0-9]/g, '');
setValue(cleaned);
}, []);
return (
{
e.preventDefault();
const paste = e.clipboardData.getData('text');
const cleaned = paste.replace(/[^0-9]/g, '');
setValue(prev => prev + cleaned);
}}
/>
);
}
export default NumberOnlyInput; ⚠️ 注意事项：
- 勿用 /^[0-9\b]+$/ 验证：\b 是单词边界断言，非退格符；且正则测试无法覆盖粘贴、拖拽等输入方式；
- event.target.value = newValue 在 React 受控组件中无效：React 会立即用 value prop 覆盖 DOM 值，直接修改 DOM 属于反模式；
- 若需支持「空值」或「初始空字符串」，当前正则 [^0-9] 已天然兼容（空字符串无匹配项，保持不变）；
- 如需兼容 IE11，请将箭头函数改为普通函数，并确保 replace 的 polyfill 已加载。
? 总结：真正的“仅数字”控制不依赖 HTML type，而在于输入即清洗 + 受控状态 + 主动拦截粘贴。该方案简洁、可靠、跨浏览器兼容，适用于所有需要强数字约束的表单场景。
