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ó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...