使用自定义TextInput组件时如何切换输入框焦点

这个问题我之前也碰到过！核心原因是你的自定义InputField是函数组件，直接接收ref属性是行不通的——函数组件本身没有实例，得用React.forwardRef来把父组件传递的ref转发到内部的原生TextInput上。下面是具体的解决步骤：

1. 修改自定义InputField组件，使用forwardRef转发ref #

把你的InputField组件用React.forwardRef包裹，这样就能将父组件传入的ref绑定到内部的原生TextInput上。修改后的代码如下：

import React, { forwardRef } from 'react';
import { View, TextInput, TouchableOpacity } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';
// 导入你的styles和constants

export const InputField = forwardRef(({ 
  placeholder, 
  onChangeText, 
  placeholderTextColor, 
  showSecureIcon, 
  isSecure, 
  onPressIcon, 
  keyboardType, 
  returnKeyType, 
  maxLength, 
  secureIconColor, 
  handleUseCallBack, 
  value 
}, ref) => { 
  return ( 
    <View style={styles.container}> 
      <TextInput 
        style={styles.input} 
        placeholder={placeholder} 
        onChangeText={onChangeText} 
        placeholderTextColor={placeholderTextColor} 
        autoCapitalize="none" 
        secureTextEntry={isSecure} 
        keyboardType={keyboardType} 
        returnKeyType={returnKeyType} 
        maxLength={maxLength} 
        value={value} 
        ref={ref} // 将转发的ref绑定到原生TextInput
      /> 
      <View style={styles.iconContainer}> 
        {showSecureIcon ? (
          <TouchableOpacity onPress={onPressIcon}> 
            <Ionicons 
              name={isSecure ? "eye-off-sharp" : "eye-sharp"} 
              color={secureIconColor} 
              size={constants.vw(25)} 
            /> 
          </TouchableOpacity>
        ) : null } 
      </View> 
    </View> 
  ) 
});

这里的关键是：forwardRef会把父组件传入的ref作为第二个参数传递给你的组件函数，你只需要把这个ref直接绑定到内部的原生TextInput上即可。

2. 调整父组件代码，完善焦点切换逻辑 #

父组件的逻辑基本没问题，但可以做一些优化，让交互更流畅：

import { useRef, useState } from 'react';
import { View } from 'react-native';
import Components from './path-to-your-components';
import constants from './path-to-your-constants';

// 父组件内部
const [state, setState] = useState({ password: '', confirm_password: '' });
const passwordRef = useRef(null); 
const confirmPasswordRef = useRef(null); 

const onSubmitEditing = () => {
  // 用可选链?.避免组件未挂载时current为null的报错
  confirmPasswordRef.current?.focus(); 
}

return (
  <>
    <View style={{ marginTop: constants.vh(66) }}>
      <Components.InputField 
        placeholder={constants.ConstStrings.setANewPassword} 
        ref={passwordRef} 
        onSubmitEditing={onSubmitEditing} // 直接传递函数，无需额外嵌套
        onChangeText={(text) => setState({ ...state, password: text })} 
        returnKeyType="next" // 建议设置这个，让键盘显示"下一步"按钮，更符合用户预期
      />
    </View>
    <View style={{ marginTop: constants.vh(20) }}>
      <Components.InputField 
        ref={confirmPasswordRef} 
        placeholder={constants.ConstStrings.confirmPassword} 
        onChangeText={(text) => setState({ ...state, confirm_password: text })} 
      />
    </View>
  </>
);

额外注意事项： #

• 设置returnKeyType：给密码输入框加上returnKeyType="next"，用户点击键盘上的"下一步"按钮就会触发onSubmitEditing，交互更直观。
• 可选链保护：用confirmPasswordRef.current?.focus()代替直接调用focus()，可以避免组件还没完成挂载时current为null导致的报错。
• 如果用TypeScript：需要给forwardRef添加对应的类型定义，确保ref的类型匹配原生TextInput的实例类型。

这样修改之后，你就能通过ref顺利实现两个自定义输入框之间的焦点切换了！

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