React Native
TextInput 組件
TextInput 是最基本的用戶文本輸入組件蒂阱，這個組件有兩個重要的屬性：
-
onChangeText：在用戶輸入的值發(fā)生變化的時候识藤，可以執(zhí)行一個回調(diào)函數(shù)。 -
onSubmitEditing：在用戶提交輸入文本的時候刁愿，可以執(zhí)行一個回調(diào)函數(shù)其徙。
現(xiàn)在用一個例子來實(shí)踐一下谱煤。這個例子中亥曹，我們要在界面中加入一個 TextInput 組件噪服，當(dāng)我們在其中輸入內(nèi)容的同時毡泻，將內(nèi)容轉(zhuǎn)換為大寫病顯示在文本框下方。
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
TextInput
} from 'react-native';
export default class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder='Type here to translate!'
onChangeText={(text) => this.setState({text})}
/>
<Text style = {{padding: 10, fontSize: 42}}>
{this.state.text.toUpperCase()}
</Text>
</View>
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
運(yùn)行效果如下：
將用戶輸入的內(nèi)容轉(zhuǎn)換為大寫
