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"
}
});

轉載于:https://www.cnblogs.com/daxueshan/p/7979671.html

總結

以上是生活随笔為你收集整理的TextInput的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。