2

Tratando de colocar varios input dentro de una tabla, me he encontrado con un inconveniente, el cual es que no me permite escribir nada en estos, por mas que haga cosas.

Según leí en mi búsqueda, no puede colocarse de tal forma.

Estado

this.state = { 
            energiaConsumida:{
                enero:"",
                febrero:"",
                marzo:"",
                abril:"",
                mayo:"",
                junio:"",
                julio:"",
                agosto:"",
                septiembre:"",
                octubre:"",
                noviembre:"",
                diciembre:""
            },
}

Dentro de la tabla

<tr>
    <td>
        <input type="text" 
        placeholder="Enero"
        value={this.state.energiaConsumida.enero}
        onChange={this.updateFields.bind(this, 'consumoEnero')}
        name="consumoEnero"
        maxLength="4"/>
    </td>
</tr>

funcion para actualizar los inputs

updateFields(propertyName, event) {
    let energyData = this.state.energiaConsumida;
    const re = /^[0-9\b]+$/;
    if (event.target.value == '' || re.test(event.target.value)) {    
        energyData[propertyName] = event.target.value;        
        this.setState({ energiaConsumida: energyData }); 
    }
}
3
  • 1
    El problema es que no estás escribiendo en el state que toma el value del input, si pones onChange={this.updateFields.bind(this, 'enero')}, ya debe poner un valor en el input
    – user22721
    el 18 abr. 2018 a las 14:15
  • Lo estás haciendo con ES6? Podrás compartir un poco más de lo que estás haciendo en ese componente?
    – Kleith
    el 18 abr. 2018 a las 14:19
  • @KacosPro ya mismo puse a compilar, probando y te digo el 18 abr. 2018 a las 14:21

1 respuesta 1

3

El problema es que estás tratando de escribir en this.state.energiaConsumida.consumoEnero y el valor del input lo toma de this.state.energiaConsumida.enero.

Cambia tu parámetro consumoEnero por enero

<input 
  type="text" 
  placeholder="Enero" 
  value={this.state.energiaConsumida.enero} 
  onChange={this.updateFields.bind(this, 'enero')} 
  name="consumoEnero"
  maxLength="4" />
1

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.