У меня есть следующее меню:
Итак, в идеале вы должны щелкнуть эти 3 точки, которые откроют рядом с ними еще одно окно. Я решил использовать всплывающее окно (https://material-ui.com/components/popover/) .. Проблема в том, что при нажатии на 3 точки ничего не происходит. Я предполагаю, что это связано с тем, что функция onClick возвращает функциональный компонент всплывающего окна, но он не отображается. Я установил отладчики и оповещения внутри функционального компонента без каких-либо ударов.
Это те 3 точки
<IconButton
aria-describedby="simple-popover"
variant="contained"
onClick={e => this.moreClick(e, props.children)}
>
<More />
</IconButton>
Это функция moreClick
moreClick = (e, officeAccount) => {
return (
<AccountFavoritesPopover element={e} officeAccount={officeAccount} />
);
};
Это весь поповер
import React from "react";
import Popover from "@material-ui/core/Popover";
export default function AccountFavoritesPopover(element, officeAccount) {
const anchorEl = element;
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return (
<div>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
//onClose={alert}
anchorOrigin={{
vertical: "top",
horizontal: "right"
}}
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
>
<div>{officeAccount}</div>
</Popover>
</div>
);
}
Должно ли всплывающее окно находиться внутри основного файла? В настоящее время 3 точки находятся в основном файле, а AccountFavoritesPopover - это отдельный файл.
Я попытался поместить код AccountFavoritesPopover в основной файл, но я не могу использовать useState в основном файле, потому что это класс. Кроме того, я не могу преобразовать его в фактическое состояние и использовать setState, потому что после запуска setState меню исчезнет ...
Изменить: ниже находится меню
<Creatable
id="Select"
menuIsOpen={this.state.Focused}
components={{
Option: this.Option
}}
/>
Ниже находятся параметры внутри меню
<div style={{ position: "relative" }}>
<components.Option {...props} />
<div id="MoreBox">
<IconButton
aria-describedby="simple-popover"
variant="contained"
onClick={e => this.moreClick(e, props.children)}
>
<More />
</IconButton>
</div>
</div>