3
votes

Here i am trying to get the TextInput value using the const value username and password but i get undefined. How to use state or props in this. I followed this tutorial https://medium.com/react-native-training/react-native-navigator-experimental-part-2-implementing-redux-c6acbf66eca1#.d0vteepp7

import React, { Component } from 'react'
import {
    View,
    Text,
    TextInput,
    Alert
} from 'react-native'
import Button from './Button'

     const route = {
        type: 'push',
        route: {
            key: 'about',
            title: 'About'
        }
    }

    const _values = {
        username: '',
        password: ''
    }

    const LoginView = ({_handleNavigate}) => {

        const _handlePress = () => {

            const {username, password} = _values
            console.log('username' + username + "" + password);

            return fetch('http://webservice.net/User/ValidateUser', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    UserName: username,
                    Password: password,
                    DeviceType: 'Android',
                    DeviceToken: 'eU0z3IR96Mg:APA91bHNyEw3CcMCHZ-MmGhFVRV8XT292NYzrD2xedMFLXdaJqcJ4DXlBmn'
                })
            }).then(response => response.json())
                .then(response => {
                    console.log(response);
                    Alert.alert('Response message is:', response.parse)
                    _handleNavigate(route)
                    return response;
                })
                .catch(error => {
                    console.error(error);
                });
        };

        return (
            <View style={{ flex: 1, backgroundColor: 'steelblue', padding: 10, justifyContent: 'center' }}>
                <Text style={{ backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center', fontSize: 40, textAlign: 'center', color: 'white', marginBottom: 30 }}>
                    LOGIN
                    </Text>
                <View style={{ justifyContent: 'center' }}>
                    <TextInput
                        style={{ height: 40, margin: 30, color: 'white', fontSize: 20 }}
                        placeholder='Username' placeholderTextColor='white'
                        autoFocus={true}
                        />
                    <TextInput
                        secureTextEntry={true}
                        style={{ height: 40, margin: 30, color: 'white', fontSize: 20 }}
                        placeholder='Password' placeholderTextColor='white'
                        />
                </View>
                <Button onPress={() => { _handlePress() } } label='Login' />
            </View>
        )
    }
export default LoginView
1

1 Answers

4
votes

You can attach TextInput's onChangeText event' handler and store its argument , like:

<TextInput
   onChangeText={(val) => _values.username = val}
   ...
/>