I am trying to make a group of text boxes or input
, only allow number, but I have run into a problem, and it is that it does not recognize property
or popertyName
, which does not allow me to know, if I am writing number or letter, since I only want to write numbers in said input
###dataPersonHouse.js
import React, {Component} from 'react';
import {render} from 'react-dom';
import '../styles/main.css';
class InputDataPerson extends Component{
constructor(){
super();
this.state = {
infoPersonHouse:{
year: "",
anguloInclinacion:"",
potenciaPanel:"",
diasNoSoleados:""
}
};
this.updateFields = this.updateFields.bind(this);
}
render() {
return (
<div>
<h3>Digite los siguientes datos</h3>
<ul className="None-Style">
<li>
<input type="text"
placeholder="Posibles dias no soleados"
value={this.state.diasNoSoleados}
onChange={this.updateFields}
name="dias"/>
</li>
<li>
<input type="text"
placeholder="Angulo de inclinacion"
value={this.state.anguloInclinacion}
onChange={this.updateFields}
name="angulo"/>
</li>
<li>
<input type="text"
placeholder="Potencia paneles solares"
value={this.state.potenciaPanel}
onChange={this.updateFields}
name="potencia"/>
</li>
<li>
<input type="text"
placeholder="Año a obtener la informacion"
value={this.state.year}
onChange={this.updateFields}
name="year"/>
</li>
</ul>
</div>
);
}
updateFields(event, propertyName){
console.log(event);
console.log(propertyName);
const dataHouse = {...this.state.infoPersonHouse};
const numbers = /^[0-9\b]+$/;
dataHouse[propertyName] = event.target.value;
this.setState({ dataHouse });
if (dataHouse[property] == '' || numbers.test(dataHouse[property])) {
this.setState({ dataHouse });
}
}
}
export default InputDataPerson;
Image
In the previous image exposed, you can see the error, I put two console.log
, which show the content of event
and property
each pressing a key.