ReactNative学习笔记6

原文地址,本文为原文不完全翻译

文本输入

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,以为需要实时捕获它的值