Por qué cuando utilizo esta forma para hacer la función handleChange <code>handleChange(e) { this.setState({ firstName: e.targe...

Carlos Zabala Roqueme

Pregunta

student•hace 6 años

Por qué cuando utilizo esta forma para hacer la función handleChange

handleChange(e) {
    this.setState({
      firstName: e.target.value
    });
  }

Cuando escribo en la caja de texto me sale el siguiente error

Pero cuando se implementan las arrow functions si funciona

 handleChange = e => {

    this.setState({
      name: e.target.value
    });
  };

Greimer Abel Pérez Guzmán

student•hace 4 años

Ya que tendrías que,por así decirlo, anclar este método a "this", y "this" apuntará a este componente.

Greimer Abel Pérez Guzmán

student•hace 4 años

Es mucho más sencillo creando la función de flecha

Rene Eduardo Corrales Torrez

student•hace 6 años

import React from 'react'

class BadgeFrom extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            firstName: '',
            lastName: '',
            jobTitle: '',
            email: '',
            twitter: ''
        };
        
      this.handleChange = this.handleChange.bind(this);

    }

Carlos Zabala Roqueme

student•hace 6 años

Vale, perfecto gracias

Juan Luis Rojas León

student•hace 6 años

Si utilizas handleChange(e) tienes que hacer el

.bind

en el constructor. (por defecto

this

no existe dentro del cuerpo de ese método)

Y las

funciones flecha

ya cuentan con

this

, por lo que no es necesario hacer el

bind

Por qué cuando utilizo esta forma para hacer la función handleChange <code>handleChange(e) { this.setState({ firstName: e.targe...

Curso de React.js [Empieza Gratis]

Curso de React.js [Empieza Gratis]