Você está aqui: React Native ::: React Native - Componentes Visuais ::: TextInput |
Como retornar o texto digitado em um componente TextInput do React Native ao clicar em um botãoQuantidade de visualizações: 1947 vezes |
Nesta dica mostrarei como podemos obter o conteúdo digitado em um TextInput do React Native a partir do evento onPress de um Button. Este código é excelente para iniciantes, pois mostra como declarar o state inicial da classe, atualizar este state a partir de métodos e obter o valor de uma variável dentro do state ao clicar em um botão. Note que usei também o evento onChangeText do componente TextInput para atualizar o state sempre que o usuário digitar ou remover algum conteúdo. Veja o código completo para o exemplo: import React, {Component} from 'react'; import {View, Button, TextInput, StyleSheet} from 'react-native'; type Props = {}; export default class App extends Component<Props> { // estado (state) dessa classe state = { nome: '' } // método que permite atualizar o state da classe atualizaNome = (text) => { this.setState({nome: text}); } // método que permite obter o conteúdo do TextInput exibir_nome(){ alert("O nome digitado foi: " + this.state.nome); } // renderiza os componentes render(){ return ( <View style={{padding: 20, flexDirection: 'column'}}> <TextInput style={styles.input} |
![]() |
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
Java - Como usar null em Java HTML5 - HTML5 para iniciantes - Como usar a meta tag viewport para controlar o layout de suas páginas HTML |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |