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: 1950 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} placeholder = "Seu nome" autoCapitalize = "none" onChangeText = {this.atualizaNome} /> <Button onPress = {() => this.exibir_nome()} title="Mostrar Nome" /> </View> ); } } // estilos CSS para a caixa de texto const styles = StyleSheet.create({ input:{ padding: 10, borderColor: '#bdbdbd', borderWidth: 1 } }); |
![]() |
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |