React Native移动端点击回车后TextInputs失焦问题求助

核心问题点 #

1. 自定义Input的onChangeText逻辑错误：当前写法逻辑混乱，且{...props}放在onChangeText之后会覆盖自定义事件处理，导致父组件无法正确接收输入框的ID和内容。
2. 回车后无焦点跳转逻辑：默认点击键盘回车会直接收起键盘并让所有输入框失焦，缺少焦点切换的配置。
3. 重复渲染导致焦点丢失：父组件输入内容变化触发重新渲染时，未优化的自定义Input会重新挂载，进而丢失焦点。

具体修复步骤 #

1. 修复自定义Input组件的事件处理 #

调整TextInput的事件传递逻辑，确保父组件能获取到输入框ID和内容，同时避免props覆盖自定义处理函数：

// 自定义Input组件
import React from 'react';
import { View, TextInput } from 'react-native';
import colors from './your-colors-path'; // 替换为你的颜色文件路径

const Input = React.memo((props) => {
  const onChangeTextHandler = (text) => {
    if (props.onInputChanged) {
      // 将输入框ID和内容一起传递给父组件
      props.onInputChanged(props.id, text);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        {/* {...props} 放在前面，避免覆盖自定义的onChangeText */}
        <TextInput
          {...props}
          onChangeText={onChangeTextHandler}
          placeholderTextColor={colors.lightGrey}
          style={{ ...styles.input, ...props.style }}
        />
      </View>
    </View>
  );
});

// 你的样式定义
const styles = {
  container: {
    // 自定义容器样式
  },
  inputContainer: {
    // 自定义输入容器样式
  },
  input: {
    // 基础输入框样式，如字体、默认边框色等
  },
};

export default Input;

2. 配置键盘回车的焦点跳转逻辑 #

在父组件中通过ref实现回车后焦点自动切换，同时设置合适的键盘回车键类型：

// 父组件
import React, { useRef } from 'react';
import { View } from 'react-native';
import Input from './Input'; // 替换为你的Input组件路径

const YourFormComponent = () => {
  // 创建各输入框的引用
  const usernameRef = useRef(null);
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  const inputChangedHandler = (inputId, text) => {
    // 处理输入内容更新，比如更新表单state
    // 示例：setFormData(prev => ({ ...prev, [inputId]: text }));
  };

  return (
    <View>
      <Input
        id="name"
        onInputChanged={inputChangedHandler}
        autoCapitalize="none"
        placeholder="Full Name"
        returnKeyType="next"
        onSubmitEditing={() => usernameRef.current?.focus()}
      />
      <Input
        ref={usernameRef}
        id="username"
        onInputChanged={inputChangedHandler}
        autoCapitalize="none"
        placeholder="Username"
        returnKeyType="next"
        onSubmitEditing={() => emailRef.current?.focus()}
      />
      <Input
        ref={emailRef}
        id="email"
        onInputChanged={inputChangedHandler}
        autoCapitalize="none"
        placeholder="Email Address"
        returnKeyType="next"
        onSubmitEditing={() => passwordRef.current?.focus()}
      />
      <Input
        ref={passwordRef}
        id="password"
        onInputChanged={inputChangedHandler}
        secureTextEntry
        autoCapitalize="none"
        placeholder="Password"
        returnKeyType="done"
        onSubmitEditing={() => passwordRef.current?.blur()} // 最后一个输入框点击done收起键盘
      />
    </View>
  );
};

export default YourFormComponent;

3. 解决输入框颜色变化问题 #

通过焦点状态动态切换输入框样式，避免颜色异常变化：

// 优化自定义Input组件的焦点样式管理
const Input = React.memo((props) => {
  const [isFocused, setIsFocused] = React.useState(false);

  const onChangeTextHandler = (text) => {
    if (props.onInputChanged) {
      props.onInputChanged(props.id, text);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          {...props}
          onChangeText={onChangeTextHandler}
          placeholderTextColor={colors.lightGrey}
          style={{
            ...styles.input,
            // 根据焦点状态切换边框/文字颜色
            borderColor: isFocused ? colors.blue : colors.grey,
            ...props.style
          }}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
        />
      </View>
    </View>
  );
});

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