TextInput

Posted 2020-10-16 Da雪山

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="请输入内容"
               onChange={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"
  }
});