本文介绍在 react 中通过受控组件和正则过滤，严格限制 `` 仅接受纯数字（0–9），彻底禁用连字符（-）、小数点（.）、字母、空格及其他任何特殊字符的输入方案。
在 React 中，<input type="number"> 表面看能限制数字输入，但实际仍允许用户输入连字符（-）、字母 e（科学计数法）、甚至部分浏览器支持小数点——这与“仅允许 0–9”这一明确业务需求相悖。因此，推荐统一使用 type="text" + 受控组件 + 实时正则清洗的方式，获得完全可控的输入行为。
✅ 正确实现：严格只保留数字字符
import { useState, useCallback } from 'react';
function NumberOnlyInput() {
const [value, setValue] = useState<string>('');
const handleChange = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
// 使用正则 /^[0-9]*$/ 过滤：仅允许空字符串或纯数字序列
const cleaned = evt.target.value.replace(/[^0-9]/g, '');
setValue(cleaned);
}, []);
return (
<input
type="text"
inputMode="numeric" // 提示移动端弹出数字键盘（非强制，但体验更佳）
pattern="[0-9]*" // 辅助表单验证（如调用 checkValidity() 时生效）
value={value}
onChange={handleChange}
placeholder="请输入数字"
/>
);
}
export default NumberOnlyInput;? 关键说明
- replace(/[^0-9]/g, '') 是核心逻辑：全局（g）匹配所有非数字字符（^ 在 [] 内表示“非”，0-9 即数字范围），并替换为空字符串。它比 /[^a-zA-Z\s]/g 更精准（原答案正则错误地保留了字母，不符合需求）。
- 避免直接操作 event.target.value：React 受控组件中，应始终通过 setValue() 更新状态，并让 value 属性驱动渲染；手动赋值 event.target.value = ... 不仅冗余，还可能破坏 React 的同步机制。
- inputMode="numeric" 是语义化增强，提升移动端体验（iOS/Android 倾向显示数字键盘），但不提供任何安全保证，必须配合 JS 过滤。
- *`pattern="[0-9]"** 是 HTML5 验证属性，当调用input.checkValidity()` 或表单提交时生效，可作为额外校验层，但不可替代 JavaScript 过滤。
⚠️ 注意事项
- 不要依赖 onKeyDown 或 onKeyPress 拦截按键：它们无法覆盖粘贴（Paste）、拖放、语音输入等场景，且不同浏览器/设备行为不一致。
- 若需支持“空值”（如初始为空、允许清空），当前正则 [^0-9] 已天然兼容（空字符串无非数字字符，不会被误删）。
- 如未来需扩展支持小数（如金额），应改用更严谨逻辑（例如：限制最多一个小数点、小数点不能开头/结尾），而非简单放宽正则——因为本例明确要求“仅数字”。
通过以上方式，你将获得一个真正只响应 0–9 输入、彻底屏蔽 -、.、e、字母及所有符号的健壮数字输入框。
