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.