0

Me gustaría saber como cargar una clase con varios componentes, dependiendo del resultado de consulta a servidor.

 import React, { Component } from 'react';
import { Modal,Button } from 'react-bootstrap';
import $ from 'jquery'; 
import {  Redirect } from 'react-router';
import Contents from './Contents';


class Login extends Component {
    constructor(props, context) {
        super(props, context);

        this.handleShow = this.handleShow.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.handleloginClick = this.handleloginClick.bind(this);
        this.handleUsernameChange = this.handleUsernameChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);

        this.state = {
          show: true,
          username: "",
          password: "",
        };
      }

      handleloginClick(event) {
      var parametros = {
        username: this.state.username,
        password: this.state.password
      }


      $.ajax({
        data: parametros,
        url: "/react/login.php",
        type: "POST",
        success: function (data) {

        }
      });   
  }

    handleUsernameChange(event) {
        this.setState({username: event.target.value});
    }

    handlePasswordChange(event) {
      this.setState({password: event.target.value});
  }


  handleClose() {
    this.setState({ show: false });
  }

  handleShow() {
    this.setState({ show: true });
  }
     render() {
       /*if(1+1==2){
           return (<Redirect to={'./Contents'} />);
       }*/

        return (
          <>

        <Modal show={this.state.show} onHide={this.handleClose}>
              <Modal.Header closeButton>
                <Modal.Title>Identificaci&oacute;n</Modal.Title>
              </Modal.Header>
              <Modal.Body>   <div className="modal-body">
                <div className="form-group">
                  <label className="control-label label-default">Usuario:</label>
                  <input type="text" className="form-control input-sm" id="usr" data-toggle="tooltip" data-placement="top" onChange={this.handleUsernameChange} value={this.state.username}   required />
                  </div>
                   <div className="form-group label-default">
                  <label  className="control-label">Clave:</label>
                  <input type="password" className="form-control input-sm" id="pass" data-toggle="tooltip" data-placement="bottom" onChange={this.handlePasswordChange} value={this.state.password}  required />
                  </div>
              </div>           </Modal.Body>
              <Modal.Footer>
                <Button variant="secondary" onClick={this.handleClose}>
                  Cerrar
                </Button>
                <Button variant="primary"  onClick={this.handleloginClick}>
                  Aceptar
                </Button>
              </Modal.Footer>
            </Modal>
          </>
        );
      }
  }
  export default Login;

Es un modal con dos campos que al hacer click en aceptar llama al servidor y este responde con un -1 o 0. Segun la respuesta, me gustaría cerrar el modal y cargar la clase Contents dentro de Contens.js que sera la que me cargue la pagina principal. Header, body, etc...

2 respuestas 2

0

Lo que puede hacer es: cuando la respuesta respuesta es positiva utiliza el objeto la funcion props.history.push('/content'), esto se puede hacer utilizando react-router-dom, sino no lo utiliza puede crear otra propiedad en en el state que sean isContent: false y cuando la respuesta es positiva actualiza el state poniendo el modal en false y el isContent en true y en el render puede ser algo asi.

import Content from './Content' Class Login { render() { return this.state.isContnent ? () : ( <> Identificación Usuario: Clave: Cerrar Aceptar ); } }

2
  • He puesto history.push('/Contents'), en el evento success pero me da un error, no se si al usar push, tengo que instalar algo.... El error es Unexpected token (34:8). Decir que importo Contents el 19 mar. 2019 a las 10:24
  • Para utilizar el push debes utilizar el react-router-dom, puedes ver si tienes el push imprimiendo los props en el componente Login.
    – luis ruiz
    el 19 mar. 2019 a las 13:41
0

Puedes tener una estructura así para implementar el push.

Archivo

App.jsx

import { Route, BrowserRouter Switch } from 'react-router-dom'

.....todo lo de la clase y en el render poner

Asi puede utilizar el objeto history, porque ademas ya tiene registrada la ruta.

Tu Respuesta

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

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