React Native 4个单字符TextInput组 填完后获取拼接值存入state

现有代码的基础问题修正 #

你当前的实现存在两个会阻碍取值的核心问题：

• 所有TextInput为完全非受控状态，onChange回调没有接收输入事件携带的文本参数，全程没有留存每个输入位的实际输入内容
• 构造函数里已经初始化了ref数组，渲染阶段又通过回调重写ref值，属于重复逻辑，虽然不影响功能，但可以直接简化复用已创建的ref

核心逻辑实现 #

1. 初始化输入值存储容器 #

在组件构造函数里新增实例属性，用来存每个位置的输入字符，避免频繁触发state更新造成不必要的渲染：

constructor(props: any) {
    super(props);
    this.state = {
      pin: "",
    };

    this.inputRefs = [
      createRef(),
      createRef(),
      createRef(),
      createRef()
    ];
    // 新增：存储每个输入位的字符
    this.pinDigits = ["", "", "", ""];
}

2. 改造TextInput的渲染逻辑 #

移除无意义的ref重写逻辑，给TextInput绑定onChangeText事件来捕获输入值：

<View style={{ flexDirection: "row" }}>
  {
    this.inputRefs.map((ref, idx) => (
      <TextInput
        onChangeText={(text) => this.handleInputChange(idx, text)}
        ref={ref}
        maxLength={1}
        style={styles.pInput}
        keyboardType="number-pad"
      />
    ))
  }
</View>

3. 补全输入处理与状态存储逻辑 #

把原来的焦点切换、值收集、状态更新逻辑合并到同一个方法里，最后一位输入完成时自动拼接全量验证码：

handleInputChange = (idx, text) => {
  // 先缓存当前位置的输入字符
  this.pinDigits[idx] = text.trim();

  // 复用原有自动跳焦逻辑，加上可选链避免未挂载时报错
  if (idx < 3 && text.length === 1) {
    this.inputRefs[idx + 1]?.current?.focus();
  } else if (idx === 3) {
    // 走到最后一个输入框的输入分支，拼接全量验证码
    const fullPin = this.pinDigits.join("");
    // 校验必须是完整4位才写入state，避免中间空值触发多余更新
    if (fullPin.length === 4) {
      this.setState({
        pin: fullPin
      }, () => {
        // setState的回调里可以拿到更新后的最新pin值，直接作为props传给下游组件即可
      });
    }
  }
};

通用体验优化提示 #

• 不要直接通过ref读取TextInput的原生实例获取输入值，React Native的TextInput没有暴露统一的value读取接口，靠实例数组缓存输入值的方案兼容性最稳定
• 可以给每个TextInput绑定onKeyPress事件，当用户在空的输入位按下删除键时，自动将焦点移动到上一个输入框，符合验证码输入的通用交互习惯
• 给ref调用加可选链判断，避免组件刚渲染、ref还未挂载完成时调用focus方法导致的崩溃

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