React Native中InputField如何限制输入小数点仅接受整数

仅设置keyboardType="numeric"无法完全限制小数点输入，不同系统、不同输入法的数字键盘布局存在差异，必须配合文本过滤逻辑才能100%生效

方案1：单字段快速适配 #

直接修改对应输入框的onChangeText回调，对输入文本做过滤后再传入setProduct方法：
把原有输入框的配置：

onChangeText={text => this.setProduct('minimumQty', text)}

替换为：

onChangeText={text => this.setProduct('minimumQty', text.replace(/[^0-9]/g, ''))}

这里的正则/[^0-9]/g会匹配所有非数字字符，替换为空字符串，小数点、特殊符号、字母等内容都会被自动清除，仅保留正整数。

方案2：多字段通用适配 #

如果项目中有多个字段需要限制为整数输入，可以直接修改setProduct方法，统一处理逻辑，避免重复代码：
修改后的完整setProduct代码如下：

setProduct = (product, text) => {
  const newData = Object.assign({}, this.state.newProduct);
  // 按需添加所有需要限制为整数的字段名
  const integerFieldList = ['minimumQty']
  let finalText = text
  // 整数字段自动过滤非数字内容
  if (integerFieldList.includes(product)) {
    finalText = text.replace(/[^0-9]/g, '')
  }
  console.log("SKT::::" + finalText)
  newData[product] = finalText;
  this.setState(
    {
      newProduct: newData,
    },
    () => {
      this.props.setEditedProduct(this.state.newProduct);
    },
  );
};

可选扩展配置 #

如果需要支持负整数输入，可将正则替换为/[^0-9-]/g，若需要额外限制负号仅能出现在文本首位，可在过滤后追加一层判断：

finalText = finalText.replace(/^-/, '占位符').replace(/-/g, '').replace('占位符', '-')

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