React Native+TypeScript开发登录页时TextInput onChangeText取值异常求助

问题1：onChangeText拿到[object Object]的原因与处理 #

你的认知完全正确：

• useState初始传入空字符串时，email状态本身就是字符串类型，调用setEmail即可直接更新状态
• 原生React Native TextInput的onChangeText回调默认第一个入参就是输入框当前的文本值，不需要额外解析

你之前打印出[object Object]和参数命名没有任何关系，大概率是以下两种错误导致：

1. 误将onChangeText属性写为onChange：onChange回调的入参是原生事件对象而非文本值，直接打印就会出现[object Object]
2. 自定义LoginInput组件做了额外封装，透传回调时错误把事件对象传给了onChangeText，没有先取e.nativeEvent.text值

你修改参数名后功能正常只是巧合，大概率是改代码时同步修正了上面的属性名/传参错误。

问题2：输入单字符后键盘自动收起的原因与处理 #

这个问题不是Expo导致的，核心原因是输入框在状态更新后被销毁重建，主动失去焦点收起键盘，通常由以下两种写法触发：

1. 你将LoginInput、LoginWrapper等自定义组件定义在了App组件内部：每次App组件因email/password状态更新重渲染时，都会生成新的组件实例，React会直接销毁旧输入框，挂载新输入框
2. 给LoginInput加了不稳定的key属性：比如key值用了随机数、每次渲染都会变化的变量，React检测到key变化就会重建组件

解决办法 #

• 把所有styled自定义组件的定义移到App组件外部，不要在组件内部声明自定义组件
• 删掉输入框上动态变化的key属性，替换为固定字符串（比如key="email-input"）
• 可选优化：用useCallback包裹输入回调，保持引用稳定，避免不必要的重渲染

参考修复后代码：

import { useCallback, useState } from 'react'
import { Text } from 'react-native'
import styled from 'styled-components/native'

// 所有自定义组件统一写在App组件外部
const LoginWrapper = styled.View`
  // 你的样式代码
`
const LoginInput = styled.TextInput`
  // 你的样式代码
`
const styles = {
  text: {
    // 你的样式代码
  }
}

export default function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // 用useCallback包裹回调，保持引用稳定
  const handleEmailChange = useCallback((text: string) => {
    setEmail(text)
  }, [])
  const handlePasswordChange = useCallback((text: string) => {
    setPassword(text)
  }, [])

  return (
    <LoginWrapper>
      <Text>Enter UserName</Text>
      <LoginInput
        style={styles.text}
        placeholder="username/email"
        onChangeText={handleEmailChange}
        key="email-input"
      />
      <Text>Enter Password</Text>
      <LoginInput
        style={styles.text}
        secureTextEntry
        placeholder="Password"
        onChangeText={handlePasswordChange}
        key="password-input"
      />
    </LoginWrapper>
  );
}

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