Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Snackbar não fecha após 2s

Olá! Eu tentei seguir o código para o Snackbar fechar em 2 segundos, mas ele continua sendo exibido indefinidamente. O que será que eu fiz de errado:

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Snackbar from '@material-ui/core/Snackbar';
import FormValidator from '../../utils/FormValidator';
import PopUp from '../../utils/PopUp';

class Formulario extends Component {
    constructor(props) {
        super(props);

        this.validador = new FormValidator([
            {
            campo: 'nome',
            metodo: 'isEmpty',
            validoQuando: false,
            mensagem: 'Entre com um nome'
            },
            {
            campo: 'livro',
            metodo: 'isEmpty',
            validoQuando: false,
            mensagem: 'Entre com um livro'
            },
            {
            campo: 'preco',
            metodo: 'isInt',
            args: [{min: 0, max: 99999}],
            validoQuando: true,
            mensagem: 'Entre com um valor numérico'
            }            
        ]);

        this.stateInicial = {
            nome: '',
            livro: '',
            preco: '',
            validacao: this.validador.valido(),
            open: true,
        }
        this.state = this.stateInicial;
    }

    escutadorDeImput = event => {
        const { name, value } = event.target;

        this.setState({
            [name]: value
        });
    }

    submitFormulario = () => {
        const validacao = this.validador.valida(this.state);
        console.log(validacao)
        if(validacao.isValid){
            this.props.escutadorDeSubmit(this.state);
            this.setState(this.stateInicial);
        }else {
            const { nome, livro, preco } = validacao;
            const campos = [nome, livro, preco];
            const camposInvalidos = campos.filter(elem => {
                return elem.isInvalid
            });
            camposInvalidos.forEach(campo => {
                PopUp.exibeMensagem('error', campo.message);
            });
        }
    }

    render() {

        const { nome, livro, preco } = this.state;

        return (
            <>
            <Snackbar
                open={this.state.open}
                onclose={() => this.setState({open: false})}
                message="Snackbar funcionando!"
                autoHide={2000}
            />
            <form>
                <Grid container spacing={2} alignItems='center'>
                    <Grid item>
                        <TextField
                            id='nome'
                            label='Nome' 
                            name='nome'
                            variant="outlined"
                            value={nome}
                            onChange={this.escutadorDeImput}
                        />
                    </Grid>
                    <Grid item>
                        <TextField
                            className='validate'
                            id='livro'
                            type='text'
                            label='Livro'
                            name='livro'
                            variant="outlined"
                            value={livro}
                            onChange={this.escutadorDeImput}
                        />
                    </Grid>
                    <Grid item>
                        <TextField
                            id='preco'
                            label='Preço'
                            name='preco'
                            variant="outlined"
                            value={preco}
                            onChange={this.escutadorDeImput}
                        />
                    </Grid>
                    <Grid item>
                        <Button
                        color='primary'
                        variant='contained'
                        onClick={this.submitFormulario}
                        type="button">Salvar</Button>
                    </Grid>

                </Grid>
            </form>
            </>
        )
    }
}

export default Formulario;

Obrigado

1 resposta
solução!

Já descobri o erro, mas não consegui apagar o tópico. Eu coloquei onclose no lugar de onClose!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software