#reactjs #react-native
Вопрос:
[введите описание изображения здесь][1]
я сделал кнопку и ввод, как я могу принять входное значение и отобразить значение в предупреждении, нажав на кнопку [1]: https://i.stack.imgur.com/sWh4F.png
Ответ №1:
В сортировке вы хотите отображать значения ввода текста в режиме оповещения, верно!
Вот, ниже приведен полный код, который у меня есть. Может быть, это тебе поможет.
import { StatusBar } from 'expo-status-bar'; import React, { Component } from 'react'; import { StyleSheet, Text, View, Button, TextInput } from 'react-native'; export default class HomePage extends Component { state = { username: '', password: '', }; getValues() { alert(this.state.username); console.log(this.state.password); } render() { return ( lt;View style={styles.container}gt; lt;TextInput style={styles.txtinput} placeholder="Enter Username" onChangeText={(text) =gt; this.setState({ username: text })} /gt; lt;TextInput style={styles.txtinput} placeholder="Enter Password" secureTextEntry={true} onChangeText={(text) =gt; this.setState({ password: text })} /gt; lt;Button onPress={() =gt; this.getValues()} title="Get Values" /gt; lt;/Viewgt; ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, txtinput: { width: '75%', height: 50, borderWidth: 1, borderColor: 'black', borderRadius: 10, padding: '24px', margin: '10px', }, }); Ответ №2:
Похоже, вы используете функциональный компонент, полный код для этого будет выглядеть так:
import React, { useState } from "react"; import { Alert, Button, StyleSheet, TextInput, View } from "react-native"; export default function App() { const [userName, setUserName] = useState(""); const [password, setPassword] = useState(""); const getValues = ()=gt; { Alert.alert(userName); console.log(password); } return ( lt;View style={styles.container}gt; lt;TextInput style={styles.textInput} placeholder="Enter Username" onChangeText={(userName) =gt; setUserName(userName)} /gt; lt;TextInput style={styles.textInput} placeholder="Enter Password" secureTextEntry={true} onChangeText={(password) =gt; setPassword( password )} /gt; lt;Button onPress={() =gt; getValues()} title="Alert Values" /gt; lt;/Viewgt; ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, textInput: { width: '75%', height: 50, borderWidth: 1, borderColor: 'black', borderRadius: 10, padding: 10, margin: 10, }, });