React Native TextInput输入0异常：设为null仍显示0的原因咨询

你遇到的问题核心在于TextInput的受控状态失效：

• 当用户输入0（或多个0）时，你的onChange逻辑会把repetitions设为null，此时value={repetitions?.toString()}会得到undefined
• React Native的TextInput如果value为undefined或null，会自动切换为非受控模式，不再受state驱动，所以输入的0会保留在输入框里，不会回退到占位符

另外你的判断逻辑还有个小问题：输入"00"这类多0字符串时，parseInt("00")会得到0，虽然能进入else分支，但没有提前拦截输入过程中的无效值。

1. 确保TextInput始终处于受控状态 #

把value的默认值设为空字符串，而不是依赖null?.toString()：

value={repetitions?.toString() || ""}

这样当repetitions为null时，value会是空字符串，TextInput保持受控，输入框会清空并显示占位符。

2. 完善输入判断逻辑 #

处理输入多个0的情况，同时简化判断：

onChange={(e) => {
  const inputText = e.nativeEvent.text;
  // 过滤掉全0的情况，比如"0"、"00"、"000"
  if (inputText && !/^0+$/.test(inputText)) {
    const num = parseInt(inputText, 10);
    if (!isNaN(num) && num > 0) {
      setRepetitions(num);
    } else {
      setRepetitions(null);
    }
  } else {
    setRepetitions(null);
  }
}}

完整修复后的代码 #

<TextInput
  keyboardType="decimal-pad"
  placeholder="0"
  value={repetitions?.toString() || ""}
  onChange={(e) => {
    const inputText = e.nativeEvent.text;
    if (inputText && !/^0+$/.test(inputText)) {
      const num = parseInt(inputText, 10);
      if (!isNaN(num) && num > 0) {
        setRepetitions(num);
      } else {
        setRepetitions(null);
      }
    } else {
      setRepetitions(null);
    }
  }}
  style={createGoalStyle.numberInput}
  maxLength={3}
/>

这样修改后，用户输入0或多个0时，输入框会自动清空并显示占位符，同时始终保持受控状态，输入内容完全由repetitions state驱动。

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