0

Preciso realizar uma validação simples de dados escritos em dois inputs no React Native. Um login e uma senha. Os dois são passados como parâmetros para uma função que vai verificar se os dados são válidos e retornar um warn, a depender do resultado.

Acontece que estou começando no React Native nos últimos dias e, pelo que percebi, a forma de capturar valores de inputs é diferente do React JS. Preciso de ajuda para conseguir capturar estes valores e passa-los para a função verificadora.

Meu código:

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

export default function App() {

  const [login, setLogin] = useState('')
  const [senha, setSenha] = useState('')

  function confereLogin(login, senha){

    const loginDefault = 'Infnet'
    const senhaDefault = '123456'

    if(login == loginDefault && senha == senhaDefault){
      console.warn('Login Realizado!')
    }else{
       console.warn('Login Inválido!')
      }
  }

  return (
    <View style={styles.container}>

      <TextInput 
      style={styles.input}
      placeholder='Login'
      value={login}
      onChangeText={(e) => console.warn(setLogin(e.target.value))}
      placeholderTextColor='#000'
      />

       <TextInput 
      style={styles.input}
      placeholder='Senha'
      value={senha}
      onChangeText={e => console.warn(setSenha(e))} 
      placeholderTextColor='#000'
      />

      <Button 
      title='Enviar'
      onPress={() => {
        confereLogin(login, senha)
      }}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 5
  },
  input:{
    borderWidth: 5,
    width: 200,
    borderRadius: 5,
    paddingLeft: 15,
    marginBottom: 10
  }
  })

O retorno no console sempre é de um undefined e não sei onde estou errando. Eu coloquei em cada um dos inputs acima uma das funções que estava usando, mas o resultado é o mesmo.

1 Resposta 1

0

O problema está na chamada do OnTextChange

Mude para:

  <TextInput 
      style={styles.input}
      placeholder='Login'
      value={login}
      onChangeText={(e) => setLogin(e)}    // Mudança aqui
      placeholderTextColor='#000'
  />

  <TextInput 
      style={styles.input}
      placeholder='Senha'
      value={senha}
      onChangeText={e => setSenha(e)}    // Mudança aqui 
      placeholderTextColor='#000'
  />

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .