React Native组件中如何聚焦下一个输入字段？

我来帮你搞定这个聚焦下一个输入字段的问题～ 因为你封装了自己的ImageTextField组件，所以需要先让这个组件暴露内部TextInput的聚焦方法，然后在父屏幕组件里通过ref来调用这些方法实现切换。

第一步：修改你的ImageTextField组件 #

我们需要给内部的TextInput添加ref，然后创建一个focus方法暴露给父组件，同时把父组件传递的其他props（比如onSubmitEditing、returnKeyType）透传给TextInput：

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

export default class ImageTextField extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref指向内部的TextInput
    this.textInputRef = React.createRef();
  }

  // 暴露focus方法，供父组件调用
  focus = () => {
    // 可选链操作符避免null/undefined报错
    this.textInputRef.current?.focus();
  }

  render() {
    const { placeHolderValue, value, editable, ...restProps } = this.props;
    return (
      <View>
        <TextInput
          ref={this.textInputRef}
          placeholder={placeHolderValue}
          placeholderTextColor="#b1b1b1"
          value={value}
          editable={editable}
          {...restProps} // 透传父组件的其他props，比如onSubmitEditing、returnKeyType
        />
      </View>
    );
  }
}

第二步：在屏幕组件中实现焦点切换 #

给每个ImageTextField实例添加ref，然后在onSubmitEditing事件里调用下一个输入框的focus方法，同时设置returnKeyType让键盘显示对应的按钮（比如"next"或"done"）：

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import ImageTextField from './ImageTextField'; // 导入你的自定义组件

export default class MyScreen extends React.Component {
  constructor(props) {
    super(props);
    // 给每个输入框创建ref
    this.firstInputRef = React.createRef();
    this.secondInputRef = React.createRef();
    this.thirdInputRef = React.createRef();
  }

  render() {
    return (
      <View style={styles.container}>
        <ImageTextField
          ref={this.firstInputRef}
          placeHolderValue="第一个输入框"
          returnKeyType="next" // 键盘显示"下一步"按钮
          onSubmitEditing={() => {
            // 点击下一步时聚焦第二个输入框
            this.secondInputRef.current?.focus();
          }}
        />
        <ImageTextField
          ref={this.secondInputRef}
          placeHolderValue="第二个输入框"
          returnKeyType="next"
          onSubmitEditing={() => {
            this.thirdInputRef.current?.focus();
          }}
        />
        <ImageTextField
          ref={this.thirdInputRef}
          placeHolderValue="第三个输入框"
          returnKeyType="done" // 最后一个输入框显示"完成"按钮
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
});

关键要点说明 #

• 透传props：用...restProps把父组件的其他属性传递给内部的TextInput，这样你可以灵活设置returnKeyType、onChangeText等属性，不用在自定义组件里逐一声明。
• ref的使用：通过在自定义组件上添加ref，父组件就能调用我们暴露的focus方法，从而触发内部TextInput的聚焦。
• 可选链操作符：?.可以避免当ref还未挂载时调用focus出现的报错，让代码更健壮。

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