onChange绑定的value值不显示？TextInput输入内容未同步展示问题咨询

问题原因 #

你当前使用的是React Native的TextInput组件，它的事件API和Web端的原生input组件不一致，你按Web端逻辑写的取值代码是错误的，导致输入内容无法同步到state，自然无法正常显示。

具体错误点 #

• onChange回调的取值路径错误：React Native的onChange返回的事件对象中，输入内容存放在event.nativeEvent.text字段，你写的event.target.value是Web端input的取值逻辑，在React Native环境下拿不到输入值。

两种修复方案 #

方案1：修改onChange的取值逻辑 #

调整handleChange函数的取值路径即可：

function handleChange(event) {
    setInput(event.nativeEvent.text)
}

方案2：使用更适配的onChangeText属性（更推荐） #

TextInput提供了专门的onChangeText属性，会直接返回输入的文本内容，不需要手动解析事件对象，代码更简洁：

const Start = () => {
  const [Input, setInput] = useState("")

  return (
    <View style= {styles.mainContainer}>
        <Header/>
        <Text style={{fontSize: 30}}>This is:{Input}</Text>
        <TextInput 
          style={styles.goalInput} 
          title="Add goal"
          value={Input}
          onChangeText={text => setInput(text)}
        />
    </View>  
  )
}

额外检查项 #

确保你已经在文件顶部正确导入依赖：

import { useState } from 'react'
import { View, Text, TextInput } from 'react-native'
// 其他Header、styles相关导入也要确保正确

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