Загружать компонент в зависимости от результата server

Мне хотелось бы знать, как загружать класс несколькими компонентами, в зависимости от результата консультации в сервер.

 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;

Это модальный с двумя полями, который, кликнув в соглашении, звонит в сервер и этот отвечает с-1 или 0. Согласно ответу, мне хотелось бы закрывать модального и загружать класс Contents внутри Contens.js, который будет той, которая загрузит главную страницу. Header, body, и т.д....

0
задан 09.04.2019, 17:17
2 ответа

То, что он может делать: когда ответ ответ положительный, использует объект функция props.history.push ('/content'), это может делаться используя react-router-dom, а он это не использует может создавать другое свойство в в state, который они isContent: false, и когда ответ положительный, обнови state помещая модального в false и isContent в true и в render смоги быть что-либо подобное.

import Content from './Content' Класс Лохин { render () { return this.state.isContnent? (): (<> Identificació n Пользователь: Ключ: Закрывать Соглашаться); } }

0
ответ дан 02.12.2019, 05:28
  • 1
    Я поместил history.push (' / Contents'), в событии success, но он дает мне ошибку, не, если, использовав push, я должен устанавливать что-то.... Ошибка - Unexpected token (34:8). Говорить, что имел значение Contents – Lorenzo Martín 19.03.2019, 12:24
  • 2
    Чтобы использовать push ты должен использовать react-router-dom, можешь видеть, есть ли у тебя push печатая props в компоненте Login. – luis ruiz 19.03.2019, 15:41

У тебя может быть структура asГ - чтобы осуществлять push.

Сохранил в архиве

App.jsx

import { Route, Бровсерроутер Свич } from 'react-router-dom'

..... весь класса и в render помещать

Так может использовать объект history, потому что кроме того уже он считает зарегистрированным маршрут.

0
ответ дан 02.12.2019, 05:28

Теги

Похожие вопросы