React（Antd样式）输入框仅允许数字输入问题（非type=number方案）

针对你遇到的问题——虽然isInteger.test()能保证state中的值是整数，但输入框仍能输入字母等非法字符，我们可以通过受控组件的实时输入拦截来解决，同时满足非负性、输入长度、小数位数的控制需求。

核心思路 #

通过在onChange事件中直接处理输入值，实时过滤掉不符合规则的字符，再更新state，这样输入框的显示内容会和state同步，用户无法输入非法内容。

完整实现代码 #

import { useState } from 'react';

const NumberInput = () => {
  const [matchPercentage, setMatchPercentage] = useState('');
  
  // 验证规则：非负、可配置小数位数（这里设为0即整数）、限制输入长度
  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    // 规则1：非负，禁止输入负号
    if (inputValue.includes('-')) {
      return;
    }
    // 规则2：控制小数位数（这里设置为0，即只能输入整数；如果要保留n位小数，改成/\d*\.?\d{0,n}/）
    const validPattern = /^\d*$/; // 整数匹配规则
    // 规则3：限制输入长度（比如最多3位）
    if (inputValue.length > 3) {
      return;
    }
    // 只有符合规则的内容才更新state和输入框
    if (validPattern.test(inputValue)) {
      setMatchPercentage(inputValue);
    }
  };

  return (
    <input
      type="text" // 不用原生number类型，避免默认行为干扰
      value={matchPercentage}
      onChange={handleInputChange}
      placeholder="请输入非负整数"
    />
  );
};

export default NumberInput;

关键细节说明 #

• 替换原生number类型：原生type="number"会自带上下箭头、允许输入e等不符合需求的行为，改用type="text"能完全掌控输入规则。
• 实时过滤逻辑拆解：
  • 非负性：直接阻止包含负号的输入，确保值始终非负
  • 小数位数控制：修改正则即可适配不同需求，比如要保留2位小数，正则改成/^\d*\.?\d{0,2}$/
  • 输入长度限制：通过判断输入值长度，超过阈值则不更新state，避免过长输入
• GUI与state同步：因为输入框是受控组件，value严格绑定matchPercentage，只有符合规则的内容才会更新state，所以输入框不会显示任何非法字符。

扩展优化（处理粘贴场景） #

如果要防止用户粘贴非法内容，可以添加onPaste事件处理：

const handlePaste = (e) => {
  e.preventDefault();
  const pastedValue = e.clipboardData.getData('text');
  // 复用输入验证逻辑
  if (/^\d*$/.test(pastedValue) && pastedValue.length <= 3 && !pastedValue.includes('-')) {
    setMatchPercentage(pastedValue);
  }
};

然后在input组件上添加onPaste={handlePaste}即可。

这样就能完全实现你想要的输入控制，既保证state中的值符合要求，也让GUI上无法输入非法内容啦！

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