React Native Manipulação de entrada de texto (Handling Text Input)

TextInput é um componente básico que permite ao usuário inserir texto. Ele possui um onChangeText suporte que aceita uma função a ser chamada toda vez que o texto é alterado e um onSubmitEditing suporte que aceita uma função a ser chamada quando o texto é enviado.

Por exemplo, digamos que, à medida que o usuário digita, você está traduzindo as palavras para outro idioma. Nesta nova linguagem, cada palavra é escrita da mesma maneira: 🍕. Portanto, a frase “Olá, Bob” seria traduzida como “🍕🍕🍕”.

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

export default class PizzaTranslator 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})}
          value={this.state.text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

Neste exemplo, armazenamos text no estado, porque ele muda com o tempo.

Há muito mais coisas que você pode querer fazer com uma entrada de texto. Por exemplo, você pode validar o texto interno enquanto o usuário digita. Para obter exemplos mais detalhados, consulte os documentos React sobre componentes controlados ou os documentos de referência para TextInput.

A entrada de texto é uma das maneiras pelas quais o usuário interage com o aplicativo.
(Traduzido da documentação original)