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
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 ?
