2.2.7 文本输入

TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

通过定义一个state状态值赋值至输入文本框的value属性中，同时组件监听onChangeText事件来获取输入文本的变化，将变化结果传递给state状态值，从而实时获取 用户输入值。

假如要实现当用户输入时，实时将其以单词为单位翻译为另一种文字。假设这另一种文字来自某个吃货星球，只有一个单词： 🍕。所以"Hello there Bob"将会被翻译为"🍕🍕🍕"。

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';

export  class pageComponent extends Component {
  state = {
    text: ''
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

在上面的例子里，把text保存到 state 中，因为它会随着时间变化。

文本输入方面还有很多其他的东西要处理。比如你可能想要在用户输入的时候进行验证，在React 中的受限组件一节中有一些详细的示例,react 中的 onChange 对应的是 rn 中的 onChangeText。