如何在React输入框中限制仅允许数字输入，排除破折号等特殊字符

你当前的代码存在几处问题：

• 变量名拼写错误：vaule 应为 value
• 未定义 newValue 变量，直接赋值会触发报错
• 过滤逻辑仅做了非法输入的判断，但没有主动修正输入内容

以下是修正后的可靠实现，确保输入框仅接受数字，自动过滤破折号及所有非数字字符：

import { useState, useCallback } from 'react';

const NumberInput = () => {
  const [localValue, setLocalValue] = useState<string>('');

  const handleChange = useCallback((event) => {
    // 全局替换所有非数字字符，只保留0-9的数字
    const filteredValue = event.target.value.replace(/[^0-9]/g, '');
    setLocalValue(filteredValue);
  }, []);

  return (
    <input
      type="text"
      name="text"
      id="input-text"
      value={localValue}
      onChange={handleChange}
      inputMode="numeric" // 移动端唤起数字键盘，优化体验
      pattern="[0-9]*" // 表单提交时的原生验证规则
    />
  );
};

export default NumberInput;

关键细节说明： #

• 选择 type="text" 而非 type="number"：因为原生 number 类型输入框默认允许输入负号、小数点、科学计数法字符（e/E），难以完全控制输入内容
• replace(/[^0-9]/g, '') 是核心逻辑：直接过滤掉所有非数字的字符，包括破折号、字母、特殊符号等，确保最终值仅含数字
• 附加属性优化体验：inputMode="numeric" 让移动端浏览器唤起数字键盘，pattern="[0-9]*" 用于表单提交阶段的原生验证

如果你坚持要使用 type="number"，可以配合按键拦截补充处理，但这种方式无法防范粘贴非法内容的情况，仅作为备选：

const handleKeyDown = useCallback((event) => {
  // 阻止输入减号、小数点、科学计数法字符等
  const forbiddenKeys = ['-', '.', '+', 'e', 'E'];
  if (forbiddenKeys.includes(event.key)) {
    event.preventDefault();
  }
}, []);

// 在input上添加onKeyDown事件
<input
  type="number"
  value={localValue}
  onChange={handleChange}
  onKeyDown={handleKeyDown}
/>

内容的提问来源于stack exchange，提问作者user3871177