porque cuando pongo una función de esta manera,el this.state
, no me esta trayendo los valores que le paso cuando escribo en los input
fnLogin(event){
debugger;
event.preventDefault();
this.setState(obtenerToken(this.state)); // this.state es marcado como undefined
this.props.fnSetToken(this.state.token);
}
Este es mi código, cuando escribo en los input, cada input cuenta con un valor en el state y este se sobrescribe, despues doy click en "NamInputEntrar" para ir a la función fnLogin.
import React, { Component } from 'react'
import { Redirect } from 'react-router'
import { flogin } from '../Services/usuarios.service';
import './Estilo/Login/index.css';
import { Button , Input, CardImg} from 'reactstrap';
import obtenerToken from '../logic/obtenerToken.js';
import {connect} from 'react-redux';
import getToken from '../Redux/Actions.js';
class Login extends Component {
constructor(props){
super(props);
this.state = {
redirectToReferrer: false,
user : "",
password : "",
clickOnButtonEnter: false ,
token : ""
};
}
fnLogin(event){
debugger;
event.preventDefault();
this.setState(obtenerToken(this.state));
this.props.fnSetToken(this.state.token);
}
handleChangeInputs = (event) => {
switch(event.target.name){
case "NamInputUser":
this.setState({user: event.target.value});
break;
case "NamInputPassword":
this.setState({password: event.target.value})
break;
default:
;
break;
}
}
render() {
const { from } = this.props.location.state || { from: { pathname: "/" } };
const { redirectToReferrer } = this.state;
return <div className = "container">
<CardImg src={require("./Imagenes/user2-512.png")} className="imgLogo" />
<Input type="text" value={this.state.user} onChange={this.handleChangeInputs} name = "NamInputUser" className = "NamInputUsuario" placeholder = "Usuario" />
<Input type="password" value={this.state.password} onChange={this.handleChangeInputs} name = "NamInputPassword" className = "NamInputPassword" placeholder = "Contraseña"/>
<Button onClick={this.fnLogin} className = "NamInputEntrar" color="primary">Entrar</Button>
<Button className = "NamInputRegis" color="secondary">Registrarme</Button>
</div>
}
}
export default Login;
Sin embargo, cuando pongo la función con una arrow function esta si accede al state con todos los valores que sobreescribi en los input.
fnLogin = (event) => {
debugger;
event.preventDefault();
this.setState(obtenerToken(this.state));
this.props.fnSetToken(this.state.token);
}
Leí sobre las arrow function,me di cuente que estas no cuentan con su propio contexto, y creo que por esto le es facil acceder a mi objeto state que esta de manera global, ya leí sobre el this y este aquí esta accediendo al objeto actual deberia encontrar el state, con los valores actualizados, pero no se que este pasando.
Saludos, aiudaa!!