When I pass as parameter 'property' inside the function it shows 'undefined'

1

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.

    
asked by Pedro Miguel Pimienta Morales 06.04.2018 в 03:27
source

1 answer

1

It's because you're not passing the parameters within the onChange function.

<input
  type="text"
  placeholder="Posibles dias no soleados"
  value={this.state.diasNoSoleados} 
  onChange={event => this.updateFields(event, "dias")}
  name="dias" />
    
answered by 06.04.2018 в 04:18