React Native
TextInput 组件
TextInput 是最基本的用户文本输入组件，这个组件有两个重要的属性：
-
onChangeText：在用户输入的值发生变化的时候，可以执行一个回调函数。 -
onSubmitEditing：在用户提交输入文本的时候，可以执行一个回调函数。
现在用一个例子来实践一下。这个例子中，我们要在界面中加入一个 TextInput 组件，当我们在其中输入内容的同时，将内容转换为大写病显示在文本框下方。
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);
运行效果如下：
将用户输入的内容转换为大写
