Как закрыть Menuitem, когда диалог открыт -- reactjs поле с участием dialog поле с участием material-design поле с участием material-ui поле с участием react-props пол Связанный проблема

How to close MenuItem when Dialog is open


0
vote

проблема

русский

Я открываю calling диалог из меню.

Проблема в том, что меню будет оставаться открытым. Как я могу убедиться, что меню будет закрыто одновременно при нажатии в меню «О».

 <код> return (     <div onMouseLeave={handlePopperClose}>         <MuiThemeProvider theme={theme}>             <MaterialLink                 underline="none"                 component="button"                 aria-owns={anchorEl ? 'help-over-popper' : undefined}                 onMouseEnter={handlePopperOpen}                 color="inherit">                 <Typography variant="h6" color="inherit" >Help</Typography>             </MaterialLink>         </MuiThemeProvider>         <Popper             id="help-over-popper"             open={Boolean(anchorEl)}             anchorEl={anchorEl}             keepMounted={false}             placement="bottom-start">             <Zoom in={true}>                 <Paper>                     <MenuList id="simple-menu">                         <Divider />                         <MenuItem onClick={handleClickOpen}>                             <Typography variant="subtitle1" >About</Typography>                         </MenuItem>                     </MenuList>                 </Paper>             </Zoom>         </Popper>         <Dialog             id="mouse-over-dialog"             open={open}             TransitionComponent={Transition}             onClose={handleClose}>             <DialogTitle id="alert-dialog-slide-title">{"Application"}</DialogTitle>             <DialogContent dividers>                 <Typography gutterBottom>                     The system provides data visibility to the on-site team members in order to assist with daily tasks                 </Typography>             </DialogContent>             <DialogActions>                 <Button onClick={handleClose} autoFocus color="primary">Ok</Button>             </DialogActions>         </Dialog>     </div >   

Введите описание изображения здесь

Спасибо

Английский оригинал

I am openingcalling a dialog from a MenuItem.

The problem is that the menu will stay open. How can I make sure the menu will be closed at the same time when pressing the About menu.

return (     <div onMouseLeave={handlePopperClose}>         <MuiThemeProvider theme={theme}>             <MaterialLink                 underline="none"                 component="button"                 aria-owns={anchorEl ? 'help-over-popper' : undefined}                 onMouseEnter={handlePopperOpen}                 color="inherit">                 <Typography variant="h6" color="inherit" >Help</Typography>             </MaterialLink>         </MuiThemeProvider>         <Popper             id="help-over-popper"             open={Boolean(anchorEl)}             anchorEl={anchorEl}             keepMounted={false}             placement="bottom-start">             <Zoom in={true}>                 <Paper>                     <MenuList id="simple-menu">                         <Divider />                         <MenuItem onClick={handleClickOpen}>                             <Typography variant="subtitle1" >About</Typography>                         </MenuItem>                     </MenuList>                 </Paper>             </Zoom>         </Popper>         <Dialog             id="mouse-over-dialog"             open={open}             TransitionComponent={Transition}             onClose={handleClose}>             <DialogTitle id="alert-dialog-slide-title">{"Application"}</DialogTitle>             <DialogContent dividers>                 <Typography gutterBottom>                     The system provides data visibility to the on-site team members in order to assist with daily tasks                 </Typography>             </DialogContent>             <DialogActions>                 <Button onClick={handleClose} autoFocus color="primary">Ok</Button>             </DialogActions>         </Dialog>     </div > 

enter image description here

Thank you

</div
              
         
         

Список ответов

Связанный проблема

0  Добавление к компоненту из другого компонента с использованием реагирования  ( Adding to component from another component using react ) 
У меня есть <код> footer , который я создал в <код> App.js и теперь у меня другой компонент называется <код> KokPlayer.js , и я хочу добавить кнопки из <код ...

2  React Redux сгенерировал компоненты без природных компонентов  ( React redux generated stateless components perfomance ) 
Я изучаю redux и реагирую. И я решил запустить простую «стресс-тест» с дающим, скажем, 15K ряды сгенерированного компонента (я надеюсь, что сделал это правиль...

0  Не могу использовать Jestjs в Windows 7 64 бита  ( Cant use jestjs in windows 7 64 bits ) 
Я хочу использовать jest для удаления тестирования приложения React. Я последовал за этим руководством, Я запускаю Python 2.7.10, используя Visual Studio 2...

7  ract.js and carousel со стрелками  ( React js antd carousel with arrows ) 
Я смотрю на использование and Caroseul, но я не видел пример, который создает кнопку предыдущего / следующей или паузы. <код> const { Carousel } = antd; Re...

-1  Сортировка реагирования - родной складки алфабатично  ( Sorting react native flatlist alphabatically ) 
Это массив, из которого плоский LIS получает данные <код> const DATA = [ { id: '1', name: 'Hamza Ahzam', phone: '03076232309', DOB: '05/07/96', }, {...

0  Нужен React Router Pro, чтобы помочь мне  ( Need a react router pro to help me ) 
Итак, сегодня я играл с маршрутизатором RACT и попытался изменить это Пример . Я хочу достичь этого: . Боковой NAV отображает только имена Когда пол...

1  React & Teadercript: Константы и пространства имен не поддерживаются  ( React typescript constant enums and namespaces are not supported ) 
У нас есть приложение React, которое использует Create-racte-app-app-teadercript Чтобы добавить поддержку Tymdercript в нашем решении, и это работает доволь...

1  Как изменить цвет надувателя на офисной ткани UI NAV компонент  ( How to change the hover colour on office fabric ui nav component ) 
У меня есть компонент NAV в моем приложении React React, и я пытаюсь изменить цвет фона каждого элемента на Hover. Пока у меня есть - <код> styles={{ link...

1  Столбец Tabulator с JSX - выполнение функций класса  ( Tabulator column with jsx executing class functions ) 
Я пытаюсь использовать React-Tabulator, но у меня проблемы с рендером функции внутри моих столбцов таблицы. Функция возвращает JSX, но она использует другие к...

0  Реагировать |. Onchange распространяется на родительский элемент OnClick  ( React onchange is propagating to onclick parent element ) 
Я работаю над небольшим проектом, и я со странной проблемой! Принципиально у меня есть некоторые компоненты, составляющие элемент, и у меня есть один элемент ...

0  REVENTJS - Есть ли способ иметь «местную» версию Package.json?  ( Reactjs is there a way to have a local version of package json ) 
Я хотел бы иметь несколько разных фирменных версий моего приложения React. По сути, я хочу иметь несколько «демонстрационных» версий, каждый с другим логотипо...

0  Как пройти значение из изображения Carousel в React JS  ( How to pass value from carousel image in react js ) 
Я изучаю js js и пытаюсь создать связываемое изображение карусели с использованием nuka-carousel. Я настроил файл данных, чтобы получить изображения и данные ...

5  Пользовательский стиль на раскрывающемся меню React-Buttrap  ( Custom style on react bootstraps dropdown menu component ) 
Я пытаюсь применить пользовательский стиль CSS к компоненту RACH BETSTRAP, но не может понять, как получить доступ к элементам, которые не являются явными в J...

0  Установка динамического базового пути в React Router DOM  ( Setting dynamic base path in react router dom ) 
Я работаю над приложением React, где / Content идет на страницу контента и / Настройки Перейти к странице настроек. Теперь я должен добавить базовый путь как ...

0  WebPack Hot Marmware Не горячая перезагрузка на Ubuntu с реагированием?  ( Webpack hot middleware not hot reloading on ubuntu with react ) 
Я столкнулся с очень расстраивающей проблемой, где мой WebPack-Hot-Mardware не «горячая перезагрузка». Он создает проект и восстанавливает проект всякий раз, ...

Связанный проблема

0  Добавление к компоненту из другого компонента с использованием реагирования 
2  React Redux сгенерировал компоненты без природных компонентов 
0  Не могу использовать Jestjs в Windows 7 64 бита 
7  ract.js and carousel со стрелками 
-1  Сортировка реагирования - родной складки алфабатично 
0  Нужен React Router Pro, чтобы помочь мне 
1  React & Teadercript: Константы и пространства имен не поддерживаются 
1  Как изменить цвет надувателя на офисной ткани UI NAV компонент 
1  Столбец Tabulator с JSX - выполнение функций класса 
0  Реагировать |. Onchange распространяется на родительский элемент OnClick 
0  REVENTJS - Есть ли способ иметь «местную» версию Package.json? 
0  Как пройти значение из изображения Carousel в React JS 
5  Пользовательский стиль на раскрывающемся меню React-Buttrap 
0  Установка динамического базового пути в React Router DOM 
0  WebPack Hot Marmware Не горячая перезагрузка на Ubuntu с реагированием?