原文地址,本文为原文不完全翻译
文本输入
TextInput 是一个用于用户输入文本的基础组件,它有一个onChangeText
属性,每当TextInput上面的文本发生变化onChangeText
属性就会触发一个事件,另外当 输入的文本被提交得时候 onSubmitEditing
属性也会触发一个事件.
import React, { Component } from 'react';
import { AppRegistry, View, TextInput,Text } from 'react-native';
class textInputDemo extends Component{
constructor(props) {
super(props);
this.state = {text: ''};
}
render(){
return(
<View styles={{flex:1}}>
<TextInput
style = {{height:40, padding: 10}}
placeholder = "输入文字"
onChangeText = {(text)=> this.setState({text})}
/>
<Text style={{padding: 10, fontSize:42}}>{this.state.text}</Text>
</View>
);
}
}
AppRegistry.registerComponent('textInputDemo',() => textInputDemo);
在这个例子中,将text设置成了state,以为需要实时捕获它的值