React 在菜单单击时显示单独的 Popover 组件

Question

我有以下菜单：

所以，理想情况下，您可以单击这 3 个点，这会在它旁边打开另一个框，我决定使用弹出窗口 (https://material-ui.com/components/popover/)。问题是，当您单击 3点什么都没有发生。我认为这是因为 onClick 函数 returns 是一个功能性弹出窗口组件，但未显示。我在功能组件中放入了调试器和警报，完全没有命中。

这就是那 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} />
    );
  };

这是整个弹出框

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 个点位于主文件中，而 AccountFavoritesPopover 是一个完整的独立文件。

我试图将 "AccountFavoritesPopover" 代码放入主文件中，但我无法在主文件中使用 useState，因为它是一个 class。另外，我无法将其转换为实际状态并使用 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>
        )
    }
}

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

React 在菜单单击时显示单独的 Popover 组件

React Display Separate Popover Component on Menu Click

components

popover

reactjs

material-ui

react-component