top of page
Writer's pictureJino Shaji

React-native Button Click Handling and setState on click event. Get data from text box via reference

Updated: Jun 9, 2020




/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from ‘react’;
import {
 Platform,
 StyleSheet,
 Text,
 View,Button,
 TextInput,Alert
} from ‘react-native’;
 
type Props = {};
export default class AppClass extends Component<Props> {
 state = {
 person: 
        {
 name: ‘Jino Shaji’,
 location:‘Kochi’
       }
      };
 locationChangeHandler=(location)=>{
 this.setState({
 person:{location:location}
      })
    };
 butonClick=()=>{
 Alert.alert(‘Hai ‘ + this.refs.txtInputName._lastNativeText 
                  +‘ You are from ‘+this.refs.txtInputLocation._lastNativeText
        );
 this.setState({
 person:{
 name:this.refs.txtInputName._lastNativeText,
 location:this.refs.txtInputLocation._lastNativeText
            }
        })
    }
render() {
return (
 <View style={styles.container}>
 <Text style={styles.welcome}>
      Name:  {this.state.person.name}
 </Text>
 <Text style={styles.welcome}>
      Location:  {this.state.person.location}
 </Text>
 <TextInput
 ref=“txtInputName”
 style={{ marginLeft: 20,width:100, borderColor: ‘gray’, borderWidth: 1}} />
 
 <TextInput 
 ref=“txtInputLocation” 
 style={{marginLeft: 20,width:100, borderColor: ‘gray’, borderWidth: 1}} />
 <Button title=‘Ok’ style={{width:50}} onPress={this.butonClick} />
 </View>
    )
  }
}
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: ‘center’,
 alignItems: ‘center’,
 backgroundColor: ‘#F5FCFF’,
  },
 baseText:{
 fontFamily:‘Cochin’,
 fontSize: 20,
  },
 welcome: {
 fontSize: 20,
 textAlign: ‘center’,
 margin: 10,
  },
 instructions: {
 textAlign: ‘center’,
 color: ‘#333333’,
 marginBottom: 5,
  },
});

0 views0 comments

Recent Posts

See All

Redux-Thunk Small Overview

Introduction Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be...

Comments


bottom of page