estoy usando reaccionar + material-ui. creé un componente de dialog en un archivo jsx como este:
export default class CartoviewAbout extends React.Component { constructor(props) { super(props); this.state = {open: false}; } _handleOpen() { this.setState({open: true}); }; _handleClose() { this.setState({open: false}); }; render() { const actions = [ <FlatButton label="Close" primary={true} keyboardFocused={true} onTouchTap={this._handleClose.bind(this)} />, ]; return ( <div> <MenuItem onTouchTap={this._handleOpen.bind(this)} primaryText="Show About Dialog" /> <Dialog title={title} actions={actions} modal={false} open={this.state.open} onRequestClose={this._handleClose.bind(this)} autoScrollBodyContent={true} contentClassName="dialog" bodyClassName="dialog_body" > <div ><p>{abstract}</p> </div> </Dialog> </div> ); } }y uso este componente en el menú en otro archivo, pero luego hago clic en el cuadro de diálogo del elemento de menú abierto y el menú no se cierra:
export default class CartoviewAppBar extends React.Component { constructor(props) { super(props); } render() { const about = appConfig.showAbout ? React.createElement(CartoviewAbout) : ""; const icon_menu = <IconMenu iconButtonElement={<IconButton><MoreVertIcon /></IconButton>} anchorOrigin={{horizontal: 'right', vertical: 'top'}} targetOrigin={{horizontal: 'right', vertical: 'top'}} > {about} </IconMenu>; return ( <div> <AppBar title={''} showMenuIconButton={false} iconElementRight={icon_menu} /> </div> ); } imagen:
quiero que el menú se cierre cuando se abre el diálogo
Deberá agregar el componente Dialog fuera del IconMenu. El evento onRequestChange de IconMenu no se activará hasta que se cierre el cuadro de diálogo.
Pruebe esto puede ser una solución.
_handleOpen() { window.setTimeout(() => { this.setState({open: true}); }, 100); //any arbitary timeout }; MenuItem onClick se activará automáticamente para cerrar IconMenu
Creo que abrir Dialog suprime el evento para cerrar IconMenu . Entonces, abrir Dialog después de cerrar IconMenu usando setTimeout