我想通过按钮将从 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>
);
}
您需要将该值保持在状态中，并且可以使用该状态变量。并且每当您单击该按钮时，您都可以将状态变量用于 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>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句