React Native 上手 - 4.处理用户输入

React Native

上一篇：React Native 上手 - 3.样式与布局

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

运行效果如下：

将用户输入的内容转换为大写

下一篇：React Native 上手 - 5.ScrollView