Reactjs 使用材质UI从阵列中选择多个悬停弹出框仅打开一个弹出框

我试图在一个页面上使用多个弹出框，但要打开的唯一弹出框是数组中的最后一个，而不管您将鼠标悬停在哪个触发器元素上。 这是使用材质UI v1.0.0-beta.46

class MultiplePopover extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: false,
      anchorEl: null,
    };
    this.handlePopoverOpen = this.handlePopoverOpen.bind(this);
    this.handlePopoverClose = this.handlePopoverClose.bind(this);
  }
  handlePopoverOpen(event) {
    this.setState({
      anchorEl: event.target,
    });
  }
  handlePopoverClose() {
    this.setState({
      anchorEl: null,
    });
  }

  render() {
    const { classes } = this.props;
    const { anchorEl } = this.state;
    const open = !!anchorEl;


    const multi = [
      {
        _id: 0,
        name: 'name1',
        hoverText: 'text1',
        linkUrl: '#',
      },
      {
        _id: 1,
        name: 'name2',
        hoverText: 'text2',
        linkUrl: '#',
      },
      {
        _id: 2,
        name: 'name3',
        hoverText: 'text3',
        linkUrl: '#',
      },
    ]

    return (
      <div className="wrapper">
        <ul>
          {multi.map(m => (
            <li
              key={m._id}
            >
              <Typography
                onMouseEnter={this.handlePopoverOpen}
                onMouseLeave={this.handlePopoverClose}
              >
                {m.name} 
              </Typography>
              <Popover
                className={classes.popover}
                classes={{
                  paper: classes.paper,
                }}
                open={open}
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'bottom',
                  horizontal: 'center',
                }}
                transformOrigin={{
                  vertical: 'bottom',
                  horizontal: 'center',
                }}
              >
                <Typography>
                  <a
                    href="{m.linkUrl}"
                    target=" /blank"
                  >
                    {m.hoverText}
                  </a>
                </Typography>
              </Popover>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

class multiplepover扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
开：错，
主持人：空，
};
this.handlePopoverOpen=this.handlepoveropen.bind（this）；
this.handlepoperclose=this.handlepoperclose.bind（this）；
}
handlePopoverOpen（事件）{
这是我的国家({
主播：事件。目标，
});
}
HandlePoverClose（）{
这是我的国家({
主持人：空，
});
}
render（）{
const{classes}=this.props；
const{anchorEl}=this.state；
持续开放=！！主播；
常数多=[
{
_id:0，
名称：'name1'，
hoverText:'text1'，
链接URL:“#”，
},
{
_id:1，
名称：'name2'，
hoverText:'text2'，
链接URL:“#”，
},
{
_id:2，
名称：'name3'，
hoverText:'text3'，
链接URL:“#”，
},
]
返回(

{multi.map（m=>(

{m.name}

))}

);
}
}

我试着从这篇文章中找到答案，但没能找到答案

你知道我怎样才能让每个popover单独打开吗

---

你可以在这里看到一个活生生的例子：

你做错了一点

首先

open

声明状态中只存在某些元素，但它不声明打开哪个元素。我已将new

openedpoverid

带到状态（默认为null）。因此，在这种情况下，您必须签入

Popover

组件

open={this.state.openedPopoverId === m._id}

第二。必须在mouseEnter事件上传递此值，以便：

<Typography
  onMouseEnter={this.handlePopoverOpen}

第三,。同时更改事件处理程序：

  handlePopoverOpen(event, popoverId) {
    this.setState({
      openedPopoverId: popoverId,
      anchorEl: event.target,
    });
  }
  handlePopoverClose() {
    this.setState({
      openedPopoverId: null,
      anchorEl: null,
    });
  }

最终代码（经过测试，可以正常工作）：

从“React”导入React；
从“道具类型”导入道具类型；
从“材质ui/样式”导入{withStyles}；
从“材料界面/排版”导入排版；
从“材料ui/Popover”导入Popover；
常量样式=({
论文：{
填充：“20px”，
宽度：“14vw”，
},
流行音乐：{
pointerEvents:'无'，
},
});
类multiplePover扩展React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
开：错，
主持人：空，
};
this.handlePopoverOpen=this.handlepoveropen.bind（this）；
this.handlepoperclose=this.handlepoperclose.bind（this）；
}
handlePopoverOpen（事件，popoverId）{
这是我的国家({
开放式脊椎动物：popoverId，
主播：事件。目标，
});
}
HandlePoverClose（）{
这是我的国家({
OpenedPoverId:null，
主持人：空，
});
}
render（）{
const{classes}=this.props；
const{anchorEl，openedpoverid}=this.state；
常数多=[
{
_id:0，
名称：'name1'，
hoverText:'text1'，
链接URL:“#”，
},
{
_id:1，
名称：'name2'，
hoverText:'text2'，
链接URL:“#”，
},
{
_id:2，
名称：'name3'，
hoverText:'text3'，
链接URL:“#”，
},
]
console.log（openedpoverid）
返回(

{multi.map（m=>(

this.handlePopoverOpen（e，m._id）}
onMouseLeave={this.handlePopoverClose}
>
{m.name}

))}

);
}
}
multiplePover.propTypes={
类：PropTypes.object.isRequired，
};
使用样式导出默认值（样式）（MultiplePover）；

@asiniy 为什么注释掉css“pointerEvents”会导致弹出代码中断？ 如果popover中有链接，这将导致问题。 css应该控制事件吗

  popover: {
    //pointerEvents: 'none',
  },

---

很好，在找到你的答案之前，我与这个问题斗争了一段时间。很好！

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Typography from 'material-ui/Typography';
import Popover from 'material-ui/Popover';

const styles = ({
  paper: {
    padding: '20px',
    width: '14vw',
  },
  popover: {
    pointerEvents: 'none',
  },
});

class MultiplePopover extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: false,
      anchorEl: null,
    };
    this.handlePopoverOpen = this.handlePopoverOpen.bind(this);
    this.handlePopoverClose = this.handlePopoverClose.bind(this);
  }
  handlePopoverOpen(event, popoverId) {
    this.setState({
      openedPopoverId: popoverId,
      anchorEl: event.target,
    });
  }
  handlePopoverClose() {
    this.setState({
      openedPopoverId: null,
      anchorEl: null,
    });
  }

  render() {
    const { classes } = this.props;
    const { anchorEl, openedPopoverId } = this.state;

    const multi = [
      {
        _id: 0,
        name: 'name1',
        hoverText: 'text1',
        linkUrl: '#',
      },
      {
        _id: 1,
        name: 'name2',
        hoverText: 'text2',
        linkUrl: '#',
      },
      {
        _id: 2,
        name: 'name3',
        hoverText: 'text3',
        linkUrl: '#',
      },
    ]

  console.log(openedPopoverId)

    return (
      <div className="wrapper">
        <ul>
          {multi.map(m => (
            <li
              key={m._id}
            >
              <Typography
                onMouseEnter={(e) => this.handlePopoverOpen(e, m._id)}
                onMouseLeave={this.handlePopoverClose}
              >
                {m.name} 
              </Typography>
              <Popover
                className={classes.popover}
                classes={{
                  paper: classes.paper,
                }}
                open={openedPopoverId === m._id}
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'bottom',
                  horizontal: 'center',
                }}
                transformOrigin={{
                  vertical: 'bottom',
                  horizontal: 'center',
                }}
              >
                <Typography>
                  <a
                    href="{m.linkUrl}"
                    target=" /blank"
                  >
                    {m.hoverText}
                  </a>
                </Typography>
              </Popover>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

MultiplePopover.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MultiplePopover);

  popover: {
    //pointerEvents: 'none',
  },