如何在 React 中实现仅允许数字输入（排除负号、小数点等所有非数字字符）

本文介绍在 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-9b]+$/ 验证：b 是单词边界断言，非退格符；且正则测试无法覆盖粘贴、拖拽等输入方式；
• event.target.value = newValue 在 React 受控组件中无效：React 会立即用 value prop 覆盖 dom 值，直接修改 DOM 属于反模式；
• 若需支持「空值」或「初始空字符串」，当前正则 [^0-9] 已天然兼容（空字符串无匹配项，保持不变）；
• 如需兼容 IE11，请将箭头函数改为普通函数，并确保 replace 的 polyfill 已加载。

? 总结：真正的“仅数字”控制不依赖 html type，而在于输入即清洗 + 受控状态 + 主动拦截粘贴。该方案简洁、可靠、跨浏览器兼容，适用于所有需要强数字约束的表单场景。