TextInput

Posted Da雪山

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="请输入内容"
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"
}
});

以上是关于TextInput的主要内容,如果未能解决你的问题,请参考以下文章