TextInput

TextInput

/*
* TextInput 是一個允許用戶在應用中通過鍵盤輸入文本的基本組件
* 本組件的屬性提供了多種特性的配置,如自動完成,自動大小寫,占位文字,鍵盤類型等
* 常用:
* placeholder 占位符
* value    輸入框的值
* password 是否密文輸入
* editable 是否可編輯
* retureKeyType 鍵盤return鍵類型
* onChange         當文本變化時調用(綁定事件)
* onEndEditing     當結束編輯時調用
* onSubmitEditding 當結束編輯,點擊提交按鈕時調用
*
*
* 練習:點擊搜索, alert顯示 輸入框的值
*
* */


 var LessionTextInput = React.createClass({

   getInitialState:function () {
     return{
       inputText:""
     }
   },
   //輸入框的onChange事件,有一個參數
   getContennt:function (text) {
     this.setState({
       inputText:text
     });
   },


   //按鈕事件
   clickBtn:function () {
     alert(this.state.inputText)
   },

   render:function () {
     return(
       <View sytle={styles.container}>
         <View style={styles.flex}>
           <TextInput
               style={styles.input}
               returnKeyType="search"
               placeholder="請輸入內容"

　　　　　　　　onChangeText={this.getContennt}

           />
         </View>
         <TouchableOpacity style={styles.btn}>
           <Text style={styles.search} onPress={this.clickBtn}>搜索</Text>
         </TouchableOpacity>
       </View>
     );
   }
 });

var styles = StyleSheet.create({
  container:{
    flexDirection:"row",
    height:45,
    marginTop:25
  },
  flex:{
    flex:1
  },
  input:{
    height:45,
    borderWidth:1,
    borderColor:"#CCC",
    borderRadius:4,
    marginLeft:5,
    padding:5,
  },
  btn:{
    width:55,
    marginLeft:5,
    marginRight:5,
    backgroundColor:"blue",
    height:45,
    justifyContent:"center",
    alignItems:"center"
  },
  search:{
    color:"#FFF"
  }
});