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

Avatar

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"
/>
...

Conviértete en premium para acceder a este video y a más de 150 cursos

2respuestas
Avatar

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

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

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.