How to get values which are in TextInput when Button is click in ReactNative

Question

1. index.android.js

import React, { Component } from 'react'; import {   AppRegistry,   StyleSheet,   Text,   ScrollView,   TextInput,   View , } from 'react-native';  var styles = require('./Style/customStyle');  import Button from 'react-native-button'; import RadioButton from 'react-native-radio-button'  class AwesomeProject extends Component {    constructor(props){     super(props)      this.state = {       username: '',       password: '',     }   }    render() {     return (     <ScrollView style={styles.content}>       <View style={styles.content}>          <Text style={styles.welcome}>           Create Account         </Text>          <Text style={styles.textStyle}>           Name         </Text>          <TextInput           style={styles.textInputStyle}           placeholder="Enter Name"           returnKeyLabel = {"next"}           onChangeText={(text) => this.setState({text})}         />          <Button style={styles.buttonStyle}>               Submit         </Button>          </View>       </ScrollView>     );   } }  AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject); 

Answer 1

First you have to stock your data in a state.

example:

<TextInput           style={styles.textInputStyle}           placeholder="Enter Name"           returnKeyLabel = {"next"}           onChangeText={(text) => this.setState({text})} /> 

Then you must pass a function that will execute when you click on the button like this:

<Button         onPress={() => function }> 

recover your value with : this.state.key

example:

class AwesomeProject extends Component {    constructor(props){     super(props)      this.state = {       username: '',       password: '',     }   }    _handlePress() {      console.log(this.state.username);      console.log(this.state.password);   }    render() {     return (     <ScrollView style={styles.content}>       <View style={styles.content}>          <Text style={styles.welcome}>           Create Account         </Text>          <Text style={styles.textStyle}>           Name         </Text>          <TextInput           style={styles.textInputStyle}           placeholder="Enter Name"           returnKeyLabel = {"next"}           onChangeText={(text) => this.setState({username:text})}         />          <Text style={styles.textStyle}>           Name         </Text>          <TextInput           style={styles.textInputStyle}           placeholder="Enter Name"           returnKeyLabel = {"next"}           onChangeText={(text) => this.setState({password:text})}         />          <Button            onPress={() => this._handlePress()}           style={styles.buttonStyle}>               Submit         </Button>          </View>       </ScrollView>     );   } } 

I didn't test this code but it should works

Answer 2

Please have a look at the example below:

Setup the state in constructor

constructor(){  super();  this.state = {isLoggedIn : false, email :"", password : ""}; } 

render method called when page loads:

render() { return (   <View style={styles.container}>     <TextInput style={styles.input}       placeholder = "Username"       returnKeyType = "next"       underlineColorAndroid='transparent'       onChange = {(text) => this.setState({email : text})}     />     <TextInput style={styles.input}       secureTextEntry       returnKeyType= 'go'       onChange = {(password) => this.setState({password : password})} 

call onChange and setState of username and password

this.setState({password : password})}

      placeholder = "password"/>      <TouchableOpacity style={styles.clickContainer} onPress= {this.login.bind(this)}>       <Text style={styles.buttonText} >Login</Text>     </TouchableOpacity>   </View> );   } 

Login method get the entered username and password

login(){  console.log(this.state.email);  this.setState({isLoggedIn : true}); }