React Native OTP输入框：仅空且失焦时显示占位符•

需求说明 #

• 输入框处于聚焦状态时，不显示占位符•
• 清空输入框内容后，若输入框为空（即使非聚焦），需显示占位符•

当前问题 #

已实现聚焦时隐藏占位符，但清空输入框并切换焦点后，空输入框的占位符•未重新显示。

问题分析 #

核心问题大概率是状态更新不及时或不正确：当清空输入框时，otpValues数组中对应位置的值未被正确设置为空字符串，导致placeholder的判断条件不满足；或是退格删除时的逻辑未同步更新状态。

解决方案 #

步骤1：确保状态更新逻辑正确 #

检查并修正handleChangeText和handleKeyPress的实现，确保输入框内容清空时，otpValues能正确更新为空字符串：

// 正确的handleChangeText实现
const handleChangeText = (text, index) => {
  const updatedOtp = [...otpValues];
  // 无论输入内容是空还是数字，都同步更新状态
  updatedOtp[index] = text;
  setOtpValues(updatedOtp);

  // 输入非空时自动跳转到下一个输入框
  if (text && index < 3) {
    inputs.current[index + 1]?.focus();
  }
};

// 处理退格键的handleKeyPress实现
const handleKeyPress = (e, index) => {
  if (e.nativeEvent.key === 'Backspace' && !otpValues[index]) {
    // 当前输入框为空时，退格跳转到上一个输入框并清空对应值
    if (index > 0) {
      inputs.current[index - 1]?.focus();
      const updatedOtp = [...otpValues];
      updatedOtp[index - 1] = '';
      setOtpValues(updatedOtp);
    }
  }
};

步骤2：优化占位符判断逻辑 #

原判断逻辑本身可行，可优化为更清晰的写法：

placeholder={!otpValues[index] && focusedIndex !== index ? '•' : ''}

完整修改后的代码片段 #

<View style={styles.otpContainer}>
  {[...new Array(4)].map((_, index) => (
    <TextInput
      ref={ref => {
        inputs.current[index] = ref;
      }}
      key={index}
      style={[
        styles.otpInput,
        focusedIndex === index && { borderColor: tertiary },
        invalidOtp && { borderColor: error },
      ]}
      keyboardType="number-pad"
      maxLength={1}
      selectTextOnFocus
      contextMenuHidden
      testID={`OTPInput-${index}`}
      onChangeText={text => handleChangeText(text, index)}
      onKeyPress={e => handleKeyPress(e, index)}
      value={otpValues[index]}
      placeholder={!otpValues[index] && focusedIndex !== index ? '•' : ''}
      placeholderTextColor={secondary}
      onFocus={() => setFocusedIndex(index)} 
      onBlur={() => setFocusedIndex(null)} 
    />
  ))}
</View>

验证要点 #

• 输入数字后切换焦点：非聚焦的空输入框需显示•
• 清空任意输入框并切换焦点：该空输入框需显示•
• 聚焦任意输入框：该输入框的占位符需隐藏

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