Modify status from a component using React.createElement

Question

Modify status from a component using React.createElement

Navigation

#1 by (0 votes)

0

I have a big problem, this object appears to me as undefined when it is called from the input text First Name

class FormularioDeInscripcion extends React.Component{
    constructor(props){
        super(props);
        this.state = {nombre:"",primerApellido:"",segundoApellido:"",correo:"",tipoDocumento:"",documento:""};

        this.actualizarEstado = this.actualizarEstado.bind(this);
    }

    listaTipoDeDocumento = 
        <select>
        <option value="CC">Cédula</option>
        <option value="CE">C.  Extrangería</option>
        </select>;

    primerNombre = React.createElement(
        "input",
        {type:"text",id:"primerNombre",name:"primerNombre",className:"estiloTxt", onChange:this.actualizarEstado}
    );

    segundoNombre = React.createElement(
        "input",
        { type:"text",  name:"segundoNombre", id:"segundoNombre", className:"estiloTxt",onChange:this.oe}
    );



    actualizarEstado(event){
        alert(this.state.nombre);

        if(event.target.id === "primerNombre")
        {
            alert("joeeee");
        }
    }



    render(){
        return(
            <form onSubmit={this.actualizarEstado}>
                {this.primerNombre} Primer Nombre <br></br>
                {this.segundoNombre} Segundo Nombre <br></br>        
                <input type="text" name="primerApellido" id="primerApellido" onChange={this.actualizarEstado}></input> Primer Apellido <br></br>
                <input type="text" name="segundoApellido" id="segundoApellido"></input> Segundo Apellido<br></br>       
                <input type="email" name="correo" id="correo"></input> Correo<br></br>           
                <input type="numeric" name="tarjetaProfesional" id="tarjetaProfesional"></input> Tarjeta Profesional <br></br>    
                {this.listaTipoDeDocumento} Tipo Documento: <br></br>
                <input type="numeric" name="numeroDocumento" id="numeroDocumento"></input> Numero Documento  <br></br> 
                <input type="submit" value="Enviar"/>
            </form>
        );
    }

}

It works correctly from other fields that are not created with React.createElement, but with these this remains as undefined.

reactjs undefined

asked by Julián Carvajal Montoya 07.04.2018 в 23:09

source

1 answer

What is the syntax to add a field to a column? Database and Java

score 0 · Accepted Answer

I just wrote your code in the way that I would work with React, it works perfectly, I have removed the "submit" input for a simpler debugging, you can add it again without problem, if you have any doubt, I'll be careful!

class FormularioDeInscripcion extends React.Component{
constructor(props){
    super(props);
    this.state = {
        nombre:"",
        primerApellido:"",
        segundoApellido:"",
        correo:"",
        tipoDocumento:"",
        documento:""
    };
}
actualizarEstado = () => {
    console.log('estado: ', this.state)
}
handleInputChange=(event)=>{
    const target = event.target;
    const value =  target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }

render(){
    return(
        <form onSubmit={this.actualizarEstado}>
            <input placeholder="primerNombre" name="primerNombre" value={this.state.primerNombre} onChange={this.handleInputChange}  className="form-control" type="text" />
            <input placeholder="segundoNombre" name="segundoNombre" value={this.state.segundoNombre} onChange={this.handleInputChange}  className="form-control" type="text" />
            <input placeholder="primerApellido" name="primerApellido" value={this.state.primerApellido} onChange={this.handleInputChange}  className="form-control" type="text" />
            <input placeholder="segundoApellido" name="segundoApellido" value={this.state.segundoApellido} onChange={this.handleInputChange}  className="form-control" type="text" />
            <input placeholder="correo" name="correo" value={this.state.correo} onChange={this.handleInputChange}  className="form-control" type="email" />
            <input placeholder="tarjetaProfesional" name="tarjetaProfesional" value={this.state.tarjetaProfesional} onChange={this.handleInputChange}  className="form-control" type="numeric" />
            <select onChange={this.handleInputChange} name="tipoDocumento">
                <option value="CC">Cédula</option>
                <option value="CE">C.  Extrangería</option>
            </select>
            <input placeholder="numeroDocumento" name="numeroDocumento" value={this.state.numeroDocumento} onChange={this.handleInputChange}  className="form-control" type="numeric" />
            <input type="button" value="Enviar" onClick={this.actualizarEstado}/>
        </form>
    );
}

}

I hope it serves you!