[Resuelto] -¿Por qué un método declarado dentro de un evento sintético recibe el "event" implícito como parámetro?

Avatar
Diter Alonso Terrones Ayala

@diter_terrones

Hola Beto, cuando asignas el evento cambiarNombre en el onChange este recibe por defecto un parámetro e que hace referencia al objeto del evento sintético.

// Parámetro "e" está implícito
updateField(e) { 
    this.setState({
        name: e.target.value
    })
}
...
<input
    type="text"
    onChange={ this.updateField } // No se pasa parámetro explícitamente
/>
...

He refactorizado el método para actualizar cualquier input pasando como parámetros el nombre del campo y el valor. Lo que pasa es que cuando paso parámetros explícitamente React retorna error (no reconoce el e.target.value), ¿No debería el e estar implícito tal como la premisa anterior?

// Método refactorizado
updateField(name, value) {
    let field = {}
    field[name] = value
    this.setState(field)
}
...
<input
    type="text"
    onChange={ this.updateField('full_name', e.target.value) } // React retorna error, no reconoce la variable "e"
/>
...
Avatar
Juan Carlos Cruz de los santos

@jccruz

Hola Diter. Mira, lo que pasa es que al tu tener onChange={ this.updateField('full_name', e.target.value) } la función se ejecuta de inmediato en el primer render y cuando se dispara el onChange la funcion updateField no encuentra el valor de e.target.value en ese momento. Si quieres pasarle el evento como parámetro al handler tienes que hacer:

<input type="text" onChange={(e) => this.updateField(e.target)} />
//Luego en tu metodo
updateField( {name, value} ){
   this.setState({[name] : value})
 }

Cuando se renderiza por primera vez el componente y luego se disparé el evento sintético onChange, este puede obtener la prop de event y pasarle el dato a la función updateField. En la forma que que explica el profesor el evento sintético manda a llamar la función updateField y no se pierde el evento.

Espero haberte ayudado amigo.

Avatar
Juan Carlos Cruz de los santos

@jccruz

Hola Diter. Mira, lo que pasa es que al tu tener onChange={ this.updateField('full_name', e.target.value) } la función se ejecuta de inmediato en el primer render y cuando se dispara el onChange la funcion updateField no encuentra el valor de e.target.value en ese momento. Si quieres pasarle el evento como parámetro al handler tienes que hacer:

<input type="text" onChange={(e) => this.updateField(e.target)} />
//Luego en tu metodo
updateField( {name, value} ){
   this.setState({[name] : value})
 }

Cuando se renderiza por primera vez el componente y luego se disparé el evento sintético onChange, este puede obtener la prop de event y pasarle el dato a la función updateField. En la forma que que explica el profesor el evento sintético manda a llamar la función updateField y no se pierde el evento.

Espero haberte ayudado amigo.

Avatar
Diter Alonso Terrones Ayala

@diter_terrones

Hola Juan, ahora entiendo por qué no se reconocía el evento. Muchas gracias por tu respuesta, estamos on faiel 🔥

Recuerda iniciar sesión para participar en la comunidad.