0

Tengo un gran problema, el objeto this me aparece como indefinido cuando es llamado desde el input text Primer nombre

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>
        );
    }

}

Funciona correctamente desde otros campos que no son creados con React.createElement, pero con estos this queda como indefinido.

1 respuesta 1

0

Acabo de escribir tu código de la forma en la que yo trabajaría con React, me funciona a la perfección, Ojo que eh quitado el input "submit" para un debuggeo más simple, puedes volver a añadirlo sin problema, si tienes alguna duda, estaré atento!

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>
    );
}

}

Espero te sirva!!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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