React Native TextInput限制两位小数：如何阻止第三位小数显示？

问题根源是你的handleInputChange大概率是在输入完成后再过滤非法内容，导致非法内容短暂显示后被替换。要彻底解决，需要在输入阶段就拦截非法内容，只让符合规则的内容更新到状态中，这样TextInput的value始终是合法值，不会出现闪烁现象。

具体实现代码 #

修改handleInputChange函数，添加严格的输入校验逻辑：

import { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native';

export default function App() {
  const [displayValue, setDisplayValue] = useState('');

  const handleInputChange = (inputText) => {
    // 正则规则：允许空输入、整数、1位小数、2位小数，禁止多个小数点和超过2位的小数
    const validPattern = /^\d*\.?\d{0,2}$/;
    // 仅当输入内容符合规则时，才更新状态
    if (validPattern.test(inputText)) {
      setDisplayValue(inputText);
    }
    // 不符合规则则不更新状态，TextInput保持原有合法值
  };

  return (
    <TextInput
      value={displayValue}
      onChangeText={handleInputChange}
      style={styles.input}
      keyboardType="decimal-pad"
      selection={{
        start: displayValue.length,
        end: displayValue.length,
      }}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    height: 40,
    borderWidth: 1,
    padding: 10,
    marginTop: 50,
  },
});

关键逻辑说明 #

• 正则校验规则：/^\d*\.?\d{0,2}$/
  • ^\d*：开头允许0个或多个数字（支持空输入或整数）
  • \.?：最多允许1个小数点（禁止多个小数点输入）
  • \d{0,2}：小数点后最多保留2个数字
• 状态更新控制：只有输入内容符合规则时才更新displayValue，输入第三位小数时因不符合规则，状态不会变化，TextInput自然不会显示非法内容
• 光标体验优化：保留你原有的selection设置，确保光标始终停在内容末尾

可选：支持货币符号（如€）的优化 #

如果需要在输入后拼接货币符号，可调整处理逻辑：

const handleInputChange = (inputText) => {
  // 先过滤掉非数字和小数点的字符
  const cleanedText = inputText.replace(/[^0-9.]/g, '');
  const validPattern = /^\d*\.?\d{0,2}$/;
  if (validPattern.test(cleanedText)) {
    // 拼接货币符号并更新状态
    setDisplayValue(`${cleanedText} €`);
  }
};

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