1.2.2 TextInput 文本输入组件

当用户需要输入文本的时候，我们可以使用TextInput组件。

TextInput组件有两个函数属性，onChangeText和onSubmitEditing。

其中onChangeText在文本变化时会触发。

onSubmitEditing在文本提交时，即输入时换行时会触发。

下面给一个onChangeText的例子。

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

export default class App extends React.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.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

效果如图：