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