Dialog não está abrindo apos clicar no menu - resolvido

Front-end
#1

Tenho um componente que deve ser aberto por Dialog. Mas não está.

Componente MenuView.jsx:

import { makeStyles } from "@material-ui/core";
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import ArrowRightIcon from '@material-ui/icons/ArrowRight';
import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
import { TreeView } from '@material-ui/lab';
import React, { useState } from 'react';
import { useHistory } from "react-router-dom";
import PregaoIniciar from "../../../views/pregaoIniciar/PregaoIniciar";
import StyledTreeItem from './StyledTreeItem';
const useStyles = makeStyles({
    root: {
      height: 15,
      flexGrow: 1,
      maxWidth: 250,
    },
});
const MenuView = props => {
    const [open, setOpen] = useState(false);
    const treeClasses = useStyles();
    const history = useHistory();
    
    const clickMenu = valor => {
        console.log('Menu: ' + valor)
        history.push('/' + valor);
    };
    const iniciarPregao = () => {
        setOpen(true);
    }
    return (
        <>
            <TreeView
                className={treeClasses.root}
                defaultExpanded={['1']}
                defaultCollapseIcon={<ArrowDropDownIcon />}
                defaultExpandIcon={<ArrowRightIcon />}
                defaultEndIcon={<div style={{ width: 24 }} />}
            >
                <StyledTreeItem nodeId="1" labelText="Iniciar pregão" labelIcon={AttachMoneyIcon} onClick={iniciarPregao} />
                <PregaoIniciar open={open} />
                <StyledTreeItem nodeId="2" labelText="Pregões" labelIcon={AttachMoneyIcon} onClick={() => clickMenu('pregao')} />
            </TreeView>
        </>
    );
}
export default MenuView;

componente PregaoIniciar.jsx:

import {
    AppBar,
    Button,
    Dialog,
    DialogActions,
    FormControl,
    InputLabel,
    MenuItem,
    Select
} from '@material-ui/core';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import './PregaoIniciar.scss';
import { todosAtivosPorEmpresa } from './PregaoIniciarAcoes';
class PregaoIniciar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            iniciar: props.open,
            licitacao: 0
        }
    }
    componentWillMount() {
        this.props.todosAtivosPorEmpresa()
    }
    clickNao() {
        console.log('clickNao')
        console.log(this.state.licitacao)
        this.setState({
            iniciar: false,
            licitacao: ''
        })
    }
    clickSim() {
        console.log('clickSim')
        console.log(this.state.licitacao)
        this.setState({
            iniciar: false
        })
    }
    handleChange = (event) => {
        this.setState({
            licitacao: event.target.value
        })
    };
    preenchimentoLicitacao = () => {
        const licitacoes = this.props.listaLicitacao || [];
        return licitacoes.map(licitacao => (
            <MenuItem key={licitacao.id} value={licitacao.id}>{licitacao.numeroAno}</MenuItem>
        ))
    }
    render(){
        return (
            <>
                <Dialog
                    open={this.state.iniciar}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                >
                <AppBar position="static" className="AppBarPregaoIniciar">
                    <div className="divAppBar">
                        <span className="spanNomeSistema">Pregão Presencial</span>
                        <span className="spanNomeTela">Iniciar Pregão</span>
                    </div>
                </AppBar>
                <div className="divPergunta">Deseja iniciar a licitação para pregão ?</div>
                <FormControl variant="outlined" className="escolhaLicitacao">
                    <InputLabel id="demo-simple-select-outlined-label">Licitação</InputLabel>
                    <Select
                        label="Licitação"
                        value={this.state.licitacao}
                        onChange={this.handleChange}
                    >
                        <MenuItem value=""><em>Nenhum</em></MenuItem>
                        { this.preenchimentoLicitacao() }
                    </Select>
                </FormControl>
                <DialogActions>
                    <Button onClick={() => this.clickNao()}  color="primary">
                        Não
                    </Button>
                    <Button onClick={() => this.clickSim()} color="primary" autoFocus>
                        Sim
                    </Button>
                    </DialogActions>
                </Dialog>
            </>
        )
    }
}
PregaoIniciar.propTypes = {
    open: PropTypes.bool.isRequired
};
const mapStateToProps = state => ({listaLicitacao: state.pregaoInicial.licitacoes})
const mapDispatchToProps = dispatch => 
    bindActionCreators({todosAtivosPorEmpresa}, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(PregaoIniciar)

Se coloco fixo:

<PregaoIniciar open={true} />

Ele abre conforme imagem ao entrar na pagina

Dialog
Dialog.png1917×904 55.5 KB

Mas se deixo

<PregaoIniciar open={open} />

No caso o estado de open é false ao entrar, e realmente não abre o Dialog, o que está correto.

Mas ao clicar no menu, ele chama o metodo:

const iniciarPregao = () => {
        setOpen(true);
}

Que muda o estado da variável open, para true. Mas não abre o Dialog.

O que está de errado ?

#2

tenta pegar o valor direto das props. ou desestrutura, nao precisa colocar o valor no state do componente.

   this.props.open

render(){
    const {open} = this.props;
        return (
          <>
                <Dialog
                    open={open | this.props.open}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                >
              ...
          </>
    )
}
#3

Funcionou.

Mas ao clicar em não, devo fechar o dialog, por isso estava usando o state, e isso não ocorre mais.

#4

eh pq como voce recebe o parametro de abrir e fechar do componente pai, voce tem que ter um onClick={fecharDialog} que vem o pai. assim vai funcionar…

import { makeStyles } from "@material-ui/core";
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import ArrowRightIcon from '@material-ui/icons/ArrowRight';
import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
import { TreeView } from '@material-ui/lab';
import React, { useState } from 'react';
import { useHistory } from "react-router-dom";
import PregaoIniciar from "../../../views/pregaoIniciar/PregaoIniciar";
import StyledTreeItem from './StyledTreeItem';
const useStyles = makeStyles({
    root: {
      height: 15,
      flexGrow: 1,
      maxWidth: 250,
    },
});
const MenuView = props => {
    const [open, setOpen] = useState(false);
    const treeClasses = useStyles();
    const history = useHistory();
    
    const clickMenu = valor => {
        console.log('Menu: ' + valor)
        history.push('/' + valor);
    };
    const iniciarPregao = () => {
        setOpen(true);
    }

    const fecharPregao = () => {
        setOpen(false);
    }

    return (
        <>
            <TreeView
                className={treeClasses.root}
                defaultExpanded={['1']}
                defaultCollapseIcon={<ArrowDropDownIcon />}
                defaultExpandIcon={<ArrowRightIcon />}
                defaultEndIcon={<div style={{ width: 24 }} />}
            >
                <StyledTreeItem nodeId="1" labelText="Iniciar pregão" labelIcon={AttachMoneyIcon} onClick={iniciarPregao} />
                <PregaoIniciar open={open} fecharPrecao={fecharPrecao} />
                <StyledTreeItem nodeId="2" labelText="Pregões" labelIcon={AttachMoneyIcon} onClick={() => clickMenu('pregao')} />
            </TreeView>
        </>
    );
}
export default MenuView;

import {
    AppBar,
    Button,
    Dialog,
    DialogActions,
    FormControl,
    InputLabel,
    MenuItem,
    Select
} from '@material-ui/core';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import './PregaoIniciar.scss';
import { todosAtivosPorEmpresa } from './PregaoIniciarAcoes';
class PregaoIniciar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            licitacao: 0
        }
    }
    componentWillMount() {
        this.props.todosAtivosPorEmpresa()
    }
    clickNao() {
        console.log('clickNao')
        console.log(this.state.licitacao)
        this.setState({
            iniciar: false,
            licitacao: ''
        })
    }
    clickSim() {
        console.log('clickSim')
        console.log(this.state.licitacao)
        this.props.fecharPregao();
    }
    handleChange = (event) => {
        this.setState({
            licitacao: event.target.value
        })
    };
    preenchimentoLicitacao = () => {
        const licitacoes = this.props.listaLicitacao || [];
        return licitacoes.map(licitacao => (
            <MenuItem key={licitacao.id} value={licitacao.id}>{licitacao.numeroAno}</MenuItem>
        ))
    }
    render(){
        return (
            <>
                <Dialog
                    open={this.props.open}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                >
                <AppBar position="static" className="AppBarPregaoIniciar">
                    <div className="divAppBar">
                        <span className="spanNomeSistema">Pregão Presencial</span>
                        <span className="spanNomeTela">Iniciar Pregão</span>
                    </div>
                </AppBar>
                <div className="divPergunta">Deseja iniciar a licitação para pregão ?</div>
                <FormControl variant="outlined" className="escolhaLicitacao">
                    <InputLabel id="demo-simple-select-outlined-label">Licitação</InputLabel>
                    <Select
                        label="Licitação"
                        value={this.state.licitacao}
                        onChange={this.handleChange}
                    >
                        <MenuItem value=""><em>Nenhum</em></MenuItem>
                        { this.preenchimentoLicitacao() }
                    </Select>
                </FormControl>
                <DialogActions>
                    <Button onClick={() => this.clickNao()}  color="primary">
                        Não
                    </Button>
                    <Button onClick={() => this.clickSim()} color="primary" autoFocus>
                        Sim
                    </Button>
                    </DialogActions>
                </Dialog>
            </>
        )
    }
}
PregaoIniciar.propTypes = {
    open: PropTypes.bool.isRequired
};
const mapStateToProps = state => ({listaLicitacao: state.pregaoInicial.licitacoes})
const mapDispatchToProps = dispatch => 
    bindActionCreators({todosAtivosPorEmpresa}, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(PregaoIniciar)
1 curtida
#5

Obrigado @thimor