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: 2053 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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 |
|
Revit Python Shell - Como pedir para o usuário selecionar somente um elemento no Revit usando a função PickObject() do objeto Selection do Revit Python Shell |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |







