React Native中TextInput组件returnKeyType="next"失效问题求助

我之前也碰到过这个问题！其实returnKeyType="next"只是负责改变键盘上按钮的显示文字，它本身不会自动帮你跳转到下一个输入框——跳转的逻辑得咱们自己手动实现才行。

下面是具体的解决步骤和代码示例，分函数组件和类组件两种场景：

核心思路 #

1. 给每个需要跳转的TextInput创建一个引用（ref），用来获取输入框的实例
2. 在当前输入框的onSubmitEditing事件中，调用下一个输入框的focus()方法，实现焦点切换
3. 配合returnKeyType="next"设置按键显示，最后一个输入框可以设为"done"

函数组件示例（React Hooks） #

import React, { useRef } from 'react';
import { View, TextInput } from 'react-native';

const InputForm = () => {
  // 创建每个输入框的引用
  const firstInputRef = useRef(null);
  const secondInputRef = useRef(null);
  const thirdInputRef = useRef(null);

  return (
    <View>
      <TextInput
        ref={firstInputRef}
        returnKeyType="next"
        // 点击next时，让第二个输入框获取焦点
        onSubmitEditing={() => secondInputRef.current?.focus()}
        blurOnSubmit={false} // Android上建议添加，避免当前输入框失去焦点
        placeholder="第一个输入框"
        style={{ borderWidth: 1, margin: 10, padding: 8 }}
      />
      <TextInput
        ref={secondInputRef}
        returnKeyType="next"
        onSubmitEditing={() => thirdInputRef.current?.focus()}
        blurOnSubmit={false}
        placeholder="第二个输入框"
        style={{ borderWidth: 1, margin: 10, padding: 8 }}
      />
      <TextInput
        ref={thirdInputRef}
        returnKeyType="done"
        placeholder="最后一个输入框"
        style={{ borderWidth: 1, margin: 10, padding: 8 }}
      />
    </View>
  );
};

export default InputForm;

类组件示例 #

import React, { Component } from 'react';
import { View, TextInput } from 'react-native';

class InputForm extends Component {
  constructor(props) {
    super(props);
    // 创建输入框引用
    this.firstInputRef = React.createRef();
    this.secondInputRef = React.createRef();
    this.thirdInputRef = React.createRef();
  }

  render() {
    return (
      <View>
        <TextInput
          ref={this.firstInputRef}
          returnKeyType="next"
          onSubmitEditing={() => this.secondInputRef.current?.focus()}
          blurOnSubmit={false}
          placeholder="第一个输入框"
          style={{ borderWidth: 1, margin: 10, padding: 8 }}
        />
        <TextInput
          ref={this.secondInputRef}
          returnKeyType="next"
          onSubmitEditing={() => this.thirdInputRef.current?.focus()}
          blurOnSubmit={false}
          placeholder="第二个输入框"
          style={{ borderWidth: 1, margin: 10, padding: 8 }}
        />
        <TextInput
          ref={this.thirdInputRef}
          returnKeyType="done"
          placeholder="最后一个输入框"
          style={{ borderWidth: 1, margin: 10, padding: 8 }}
        />
      </View>
    );
  }
}

export default InputForm;

几个注意点 #

• blurOnSubmit={false}：在Android设备上，如果不设置这个属性，当前输入框会在点击next后失去焦点，可能导致下一个输入框无法正确获取焦点，建议加上。
• 可选链操作符?.：用来避免组件还未挂载时，调用focus()出现的空指针错误，让代码更健壮。
• 确保ref和对应的TextInput正确关联，不然跳转逻辑会失效。

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