how to get input value in react native?

Question

could you please tell me how to get input field value or in other words username and password input field value on button click .

here is my code https://rnplay.org/apps/drT9vw

import React from 'react';
import {
  registerComponent,
} from 'react-native-playground';
import {
      Text,
    View,
    Image,
    StyleSheet,
    TextInput,
    TouchableHighlight
} from 'react-native';

class App extends React.Component {
    constructor(props){
        super(props);
        this.state ={
            userName :'',
            password:''
        };
    }

    login(){
        alert(this.state.userName)
    }
    OnChangesValue(e){
        console.log(e.nativeEvent.text);
        this.setState({
            userName :e.nativeEvent.text,
        })
    }

    changePassword(e){
        console.log(e.nativeEvent.text);
        this.setState({
            password :e.nativeEvent.text,
        })
    }

    render() {
        return (
            <View style={styles.container}>

                <Text style={styles.heading}> Login</Text>
                <TextInput
                    style={styles.loginInput}
                    onChange={(text)=> this.setState({userName:text})}
                    ref="myInput"
                    underlineColorAndroid='transparent'
                    placeholder="username !"
                />
                <TextInput
                    style={styles.loginInput}
                    ref="pass"
                    onChange={this.changePassword.bind(this)}
                    underlineColorAndroid='transparent'
                    placeholder="password to ff!"
                    secureTextEntry={true}
                />
                <TouchableHighlight style={styles.touchable} onPress={this.login.bind(this)}>
                    <Text style={styles.touchableButton}>Click</Text>
                </TouchableHighlight>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#EF501E',
        flex: 1,
        alignItems: 'center',
        padding :20
    },
    logo: {
        width: 50,
        height: 50
    },
    heading: {
        fontSize: 30,
        marginTop: 20
    },
    loginInput: {
        height: 50,
        alignSelf: 'stretch',
        borderWidth: 1,
        borderColor: '#33090C',
        flexDirection: 'row',
        justifyContent: 'center',
        marginBottom:10
    },
    touchable:{
        backgroundColor:'#2E18DD',
        height:40,
        alignSelf:'stretch',
        alignItems:'center',
        justifyContent:'center'

    },
    touchableButton:{
      color:'#fff',
        fontSize:10
    }
});

registerComponent(App);

update

login(){
        alert(this.refs.myInput.value)
    }

it give undefined

Mayank Shukla · Accepted Answer · 2017-01-15 07:10:13Z

1

Not getting the exact issue, u are storing the userName and password in state variable. So you can get the values the by this.state.userName and this.state.password. or u can use the refs also to get the value like this: this.refs.myInput.value.

Change this fun:

changePassword(text){
    console.log(text);
    this.setState({
        password :text,
    })
}

Check the same example on tutorialspoint: https://www.tutorialspoint.com/react_native/react_native_text_input.htm

edited Jan 15, 2017 at 7:10

answered Jan 15, 2017 at 6:23

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mayank Shukla Over a year ago

refs will not work, because ur textinput does not have a value property, use state. it will work.

Mayank Shukla Over a year ago

is there any problem when u are using this.state.userName and this.state.pass ?

user944513 Over a year ago

see rnplay.org/apps/drT9vw it gives object when I try to get username on button click

Swapnil · Accepted Answer · 2017-01-15 06:16:40Z

0

It can be done in two ways. If the input fields are controlled, you can get the values from the state itself. In case of uncontrolled input fields (your case), you can use refs to get the input values

login() {
    console.log(this.refs.myInput.value)
}

answered Jan 15, 2017 at 6:16

Swapnil

2,6031 gold badge21 silver badges31 bronze badges

1 Comment

Swapnil Over a year ago

On clicking the button the alert shows the string which was typed in the username input box. What's undefined ?

Collectives™ on Stack Overflow

how to get input value in react native?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related