1

Como eu posso pegar esconder um componente quando o resultado do banco estiver concluído.

Código:

import React, { Component } from 'react';
import axios from 'axios';

class Login extends Component {
    state = {
        user: '',
        senha: ''
    }

    formLogin = () => {
        console.log('carregando..');

        axios.post('../../auth/login', {
            email: this.state.user,
            senha: this.state.senha
        })
        .then(resultado => {
            if (!resultado.data.verifUser) {
                console.log("Dados errado");
            }

            console.log('Terminou');
        });
    }

    render() {
        return (
            <div className="Login">
                <div className="form-group">
                    <label for="inputEmail">E-mail</label>
                    <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Digite seu email" onInput={(e) => this.setState({ user: e.target.value })} name="txtEmail" />
                    <small id="emailHelp" class="form-text text-muted">Informe o seu e-mail que foi cadastrado ou usuĂ¡rio</small>
                </div>
                <div class="form-group">
                    <label for="senha">Senha</label>
                    <input type="password" class="form-control" id="senha" placeholder="*******" name="txtSenha" onInput={(e) => this.setState({ senha: e.target.value })} />
                </div>
                <button type="submit" class="btn btn-primary" onClick={() => this.formLogin()}>Entrar</button>
            </div>
        );
    }
}

export default Login;
3
  • Geralmente, se houver uma falha, usuário/senha incorreto, permanece a mesma página e, de alguma forma, alerta o usuário do erro. Se não então é redirecionado para outra página, um dashboard, por exemplo
    – Costamilam
    5/02/2019 às 2:17
  • Freitas, poderia reformular sua pergunta de forma que a mesma fique mais clara e compreensível? Quero te ajudar mas não entendi a sua questão. 5/02/2019 às 11:09
  • Allan Andrade, eu preciso que quando a requisição for acionada dispare uma div de carregando para que o usuário veja, e quando terminar, essa div saia
    – Freitas
    6/02/2019 às 23:46

1 Resposta 1

0

Vc precisa de um state para controlar o style ou alterar uma classe, fiz um exemplo alterando o style diretamente:

import React, { Component } from 'react';
import axios from 'axios';

class Login extends Component {
    state = {
        user: '',
        senha: '',
        // State para controlar a exibição do componente
        isHide: false
    }

    formLogin = () => {
        console.log('carregando..');

        axios.post('../../auth/login', {
            email: this.state.user,
            senha: this.state.senha
        })
        .then(resultado => {
            // Após a consulta, esconder div
            this.setState({ isHide: true })
            if (!resultado.data.verifUser) {
                console.log("Dados errado");
            }

            console.log('Terminou');
        });
    }

    render() {
        return (
            <div className="Login">
                // Ternário para alterar valor do display para none ou block
                <div style={ { display: this.state.isHide ? 'none' : 'block' } }>
                  // div a ser escondida ou exibida
                </div>
                <div className="form-group">
                    <label for="inputEmail">E-mail</label>
                    <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Digite seu email" onInput={(e) => this.setState({ user: e.target.value })} name="txtEmail" />
                    <small id="emailHelp" class="form-text text-muted">Informe o seu e-mail que foi cadastrado ou usuĂ¡rio</small>
                </div>
                <div class="form-group">
                    <label for="senha">Senha</label>
                    <input type="password" class="form-control" id="senha" placeholder="*******" name="txtSenha" onInput={(e) => this.setState({ senha: e.target.value })} />
                </div>
                <button type="submit" class="btn btn-primary" onClick={() => this.formLogin()}>Entrar</button>
            </div>
        );
    }
}

export default Login;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

4
  • Obrigado pela resposta. Mas fala que o isHide não foi definida, então utilizei o this para referenciar a ele, e sumiu o erro. Só que eu coloquei um "<p>Carregando</p>" dentro da div onde tem o comentario "div a ser escondida" para testar, mas o <p> sempre fica visísvel
    – Freitas
    6/02/2019 às 23:39
  • Estava olhando a documentação e meio que vi da para fazer algo assim. Mas tbm não aparece ou some a div.
    – Freitas
    6/02/2019 às 23:41
  • state = { user : '', senha: '', isLoading: false } render(){ if(this.isLoading){ return( <div className="loading"> <i class="fas fa-spinner fa-4x fa-spin"></i> </div> ); }else{ return( <div className="Login"> <p>Terminou</p> </div> ); } }
    – Freitas
    6/02/2019 às 23:44
  • @Freitas tinha esquecido do "this.state", acabei de editar a resposta. 8/02/2019 às 0:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .