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

I tried the following code and it worked with me. It is about establishing variables, and then making the value of the textinput to be this variable. You can deal with the variable as the value of textinput.

//This is an example of online Emulator by https://aboutreact.com
import React, {useState} from 'react';
import { Text, View, StyleSheet, TextInput, Alert, Button } from 'react-native';

const App = () => {
  const [name, setname] = useState('')
  const [secret, setsecret] = useState('')
  var Value = name;
  var secret_Value = secret;
  return (
    <View style={styles.container}>
      <TextInput 
        style={styles.input}
        placeholder='write here'
        value={Value}
        onChangeText={(Value) => {
          setname(Value)
          
        }}
      />
      <TextInput 
        style={styles.input}
        placeholder='write here'
        value={secret_Value}
        onChangeText={(secret_Value) => {
          setsecret(secret_Value)
          
        }}
      />
      <Button title='submit' onPress={() => {
        if (Value === 'Omar' && secret_Value === '123'){
          Alert.alert('Done')
        }
      }}/>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#D3BFA1',
    alignItems: 'center',
    justifyContent: 'center'
  },
  input: {
    borderBottomWidth: 1,
    width: '50%',
    marginVertical: 5
  },
});

Answer 2

<TextInput editable={true} style={{height: 40, borderColor: 'gray', borderWidth: 1}}
   onChangeText={(text1) => this.setState({text1})}
    value={this.state.text1} />

    <Button
        onPress={()=>Alert.alert(this.state.text1)}
        title="Press Me"
        color="#841584"
      />

This will do it guys.

Answer 3

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});
}

Answer 4

In your state, you have usename and password and in your render(), you are asking for a name. If you want the name, you should put it in the state as well.

this.state = {
          username: '',
          password: '',
          name: ''
        } 

If you want to get username and password,

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: '',
    }
  }

  onUsernameChange(username) {
     let s = this.state;
     s.username = username;
     this.setState(s);   
  }

  onPasswordChange(password) {
     let s = this.state;
     s.password = password;
     this.setState(s);   
  }

  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 Username"
          returnKeyLabel = {"next"}
          onChangeText={this.onUsernameChange}
        />

        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Password"
          returnKeyLabel = {"next"}
          onChangeText={this.onPasswordChange}
        />

        <Button style={styles.buttonStyle}>
              Submit
        </Button>

        </View>
      </ScrollView>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Answer 5

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 6

You can get value from state i.e this.state.username.

<Button
    style={styles.textInputStyle}
    onPress={() => console.log(this.state.username)}>
      Submit
</Button>