[React Native] State and Touch Events

In React, components manage their own state. In this lesson, we'll walk through building a component which manages it ' s own state as well as using TextInput and Toucha Blehighlight to handle touch events.

Import React, {Component, proptypes} from ' React '; import {View, Text, StyleSheet, TextInput, Touchablehighlight, Activityindicatorios} from' React-native ';varstyle =stylesheet.create ({maincontainer: {flex:1, padding:30, MarginTop:65, Flexdirection:' Column ', Justifycontent:' Center ', BackgroundColor:' #48BBEC '}, Title: {marginbottom:20, FontSize:25, TextAlign:' Center ', Color:' #fff '}, Searchinput: {height:50, padding:4, MarginRight:5, FontSize:23, BorderWidth:1, BorderColor:' White ', Borderradius:8, Color:' White '}, ButtonText: {fontSize:18, Color:' #111 ', Alignself:' Center '}, Button: {height:45, Flexdirection:' Row ', BackgroundColor:' White ', BorderColor:' White ', BorderWidth:1, Borderradius:8, MarginBottom:10, Alignself:' Stretch ', Justifycontent:' Center '}}); Exportdefaultclass Main extends component{constructor (props) {super (props) This. State ={username:‘‘, isloading:false, Error:false        }; } handlechange (event) { This. SetState ({username:event.nativeEvent.text})} Handlesubmit (event) {//update our Indicatorios spinner         This. SetState ({isloading:true        }); Console.log (' Submit ', This. State.username); //fetch data from GitHub        //reroute to the next passing that GitHub informaiton} render () {return (           <view style={style.maincontainer}> <text Style={style.title}>search forA Github user</text> <TextInput Style={Style.searchinput} value={ This. State.username} onChange={ This. Handlechange.bind ( This)}               /> <touchablehighlight Style={Style.button} onpress={ This. Handlesubmit.bind ( This)} Underlaycolor= "White" > <text style={style.buttontext}>search user</text> </TouchableHighlight> </View>       )    }}

< TextInput                  style ={style.searchinput}                  value ={this.state.username}                  OnChange ={this.handlechange.bind (This)}                />

Search box, once value changed, set current username state.

< touchablehighlight       style ={style.button}       onpress ={this.handlesubmit.bind (This)}       Underlaycolor = "White" >

Search button, a touch button, so is not the OnClick event but Onpress event.

Underlaycolor:when Touch, change background color to white color.

[React Native] State and Touch Events