如何从 TextInput 获取值并使用 Button React Native 进行设置？

Question

我想通过按钮将从 TextInput 获得的用户名分配给用户名变量，并在下面的文本中输出。 意思是，如果用户输入用户名，则不会发生任何事情，但是当单击按钮时，输入的用户名将显示在文本中。 我怎样才能做到这一点？

    function Login({navigation}) {

      return (
         <View style= {globalStyles.containerInput}>
             <TextInput 
                 style= {globalStyles.input} 
                 maxLength={20} 
                 minLegth={10} 
                 placeholder= "Username"
             />
         </View>
         <View style= {globalStyles.containerButton}>
             <Pressable 
                onPress={}
             >
                <Text style={globalStyles.text}>confirm</Text>
             </Pressable>
         </View>
         </View style={globalStyles.textOutput}>
             <Text style={globalStyles.text}>{usernameValue}</Text>
         </View>
      );
    }

Answer 1

您需要将该值保持在状态中，并且可以使用该状态变量。 并且每当您单击该按钮时，您都可以将状态变量用于 userName 例如

function Login({navigation}) {
     const [user, setUser] = useState("");
     const [userName, setUserName] = useState("");   
     const onValueChange = (text) => setUser(text); 
     const onButtonHandler = () => setUserName(user);
      return (
         <View style= {globalStyles.containerInput}>
             <TextInput 
                 style= {globalStyles.input} 
                 maxLength={20} 
                 minLegth={10} 
                 placeholder= "Username"
                 value={user}
                 onChangeText={onValueChange}
             />
         </View>
         <View style= {globalStyles.containerButton}>
             <Pressable 
                onPress={onButtonHandler}
             >
                <Text style={globalStyles.text}>confirm</Text>
             </Pressable>
         </View>
         </View style={globalStyles.textOutput}>
             <Text style={globalStyles.text}>{userName}</Text>
         </View>
      );
    }