I can not write in an input inside a table in ReactJS

Question

I can not write in an input inside a table in ReactJS

Navigation

#1 by (3 votes)

2

Trying to place several input within a table, I have encountered an inconvenience, which is that it does not allow me to write anything in these, no matter how much I do things.

As I read in my search, it can not be placed in such a way.

State

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

Inside the table

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

function to update the 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 }); 
    }
}

javascript reactjs react

asked by Pedro Miguel Pimienta Morales 18.04.2018 в 15:57

source

1 answer

Copies $ .class in jar files Ajax does not bring me the data

score 3 · Accepted Answer

The problem is that you are trying to write in this.state.energiaConsumida.consumoEnero and the value of the input takes it from this.state.energiaConsumida.enero .

Change your parameter consumoEnero by enero

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