Реагировать на отображение отдельного всплывающего компонента в меню

Question

У меня есть меню ниже:

Таким образом, в идеале вы должны нажать на эти 3 точки, которые откроют еще одно поле рядом с нимЯ решил использовать popover (https://material -ui.com / components / popover / ). Проблема в том, что при нажатии на 3 точки ничего не происходит. Я предполагаю, что это потому, что функция onClick возвращает функциональный компонент popover, но он не отображается. Я вставляю отладчики и оповещения в функциональный компонент, не нажимая вообще.

Это те 3 точки

 <IconButton
        aria-describedby="simple-popover"
        variant="contained"
        onClick={e => this.moreClick(e, props.children)}
      >
        <More />
      </IconButton>

Это большеНажмите функцию

  moreClick = (e, officeAccount) => {
    return (
      <AccountFavoritesPopover element={e} officeAccount={officeAccount} />
    );
  };

Этовесь popover

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>
  );
}

Должен ли popover находиться внутри основного файла? В настоящее время 3 точки находятся в главном файле, а AccountFolatedPopover - это отдельный файл.

Я попытался поместить код "AccountFlectedPopover" в основной файл, но не могу использовать 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>

Answer 1

Попробуйте, это должно работать (не проверено)

Main.js

export default class Main extends Component {
    constructor(props) {
        this.state = {
            selectedIndex: 0,
            selectedId: 0,
            anchorEl: null
        };
    }

    moreClick = (anchorEl, selectedId, selectedIndex) => {
        this.setState({
            selectedId,
            selectedIndex,
            anchorEl,
            open: true,
        });
    }

    handleClose = () => {
        this.setState({
            open: false
        });
    }

    render() {
        const menu = [
            {
                id: 1,
                text: '002',
                more: 'more 003'
            },
            {
                id: 2, 
                text: '003',
                more: 'more 003'
            },
            {
                id: 3, 
                text: '004',
                more: 'more 003'
            }
        ]

        const menuDom = menu.map((m, index) => {
            return (
                <IconButton
                    key={m.id}
                    aria-describedby="simple-popover"
                    variant="contained"
                    onClick={e => this.moreClick(e.currentTarget, index, m.id)}>
                        {m.text}
                </IconButton>
            )
        })
        const more = (<More>{menu[this.state.selectedIndex].text}</More>)
        return (
            <div>
                {menuDom}
                <AccountFavoritesPopover open={this.state.open} anchorEl={this.state.anchorEl} onClose={this.handleClose}>
                    {more}
                </AccountFavoritesPopover>
            </div>
        )
    }
}

AccountFavorPopover.js

export default function AccountFavoritesPopover(open, anchorEl, onClose) {
    const id = open ? "simple-popover" : undefined;

    return (
      <div>
        <Popover
          id={id}
          open={open}
          anchorEl={anchorEl}
          onClose={onClose}
          anchorOrigin={{
            vertical: "top",
            horizontal: "right"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
        >
          <div>{this.props.children}</div>
        </Popover>
      </div>
    );
  }