时间戳

首页 > 解决方案 > 反应在菜单点击上显示单独的弹出框组件

reactjs - 反应在菜单点击上显示单独的弹出框组件

问题描述

我有以下菜单：

在此处输入图像描述

所以，理想情况下你会点击那三个点，这会在它旁边打开另一个框，我决定使用一个弹出框（https://material-ui.com/components/popover/）..问题是当您单击 3 个点没有任何反应。我认为这是因为 onClick 函数返回了一个功能性弹出框组件，但没有显示出来。我在功能组件中放入了调试器和警报，根本没有命中。

这是那三个点

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

popover 必须在主文件中吗？目前这 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>

标签： reactjscomponentsmaterial-uipopoverreact-component

解决方案

试试这个，这应该工作（未测试）

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

推荐阅读