如何在MaterialUI中的TimelineDot上为React添加PopOver？

问题描述

我希望将鼠标悬停在TimelineDot上时出现PopOver

这是当前时间线点显示的方式

<Timeline className={classes.timeline} align="alternate">
        {props.stopList.map((stop) => (
          <TimelineItem>
            <Timelineseparator>
              <TimelineDot
                onMouseEnter={handlePopoverOpen}
                onMouseLeave={handlePopoverClose}
              />
              <TimelineConnector />
            </Timelineseparator>
            <TimelineContent>{stop}</TimelineContent>
          </TimelineItem>
        ))}
      </Timeline>
      <Popover
        id="mouse-over-popover"
        className={classes.popover}
        classes={{
          paper: classes.paper,}}
        open={open}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: "bottom",horizontal: "left",}}
        transformOrigin={{
          vertical: "top",}}
        onClose={handlePopoverClose}
        disableRestoreFocus
      >
        <Typography>I use Popover.</Typography>
      </Popover>

在Material中没有这样的东西，它的TimeLineDots具有onMouseEnter，那么如何做到这一点？

解决方法

由于您没有添加整个代码库，所以我不确定您错过了哪一行。

尝试这种方法，

import React from "react";
import Timeline from "@material-ui/lab/Timeline";
import TimelineItem from "@material-ui/lab/TimelineItem";
import TimelineSeparator from "@material-ui/lab/TimelineSeparator";
import TimelineConnector from "@material-ui/lab/TimelineConnector";
import TimelineContent from "@material-ui/lab/TimelineContent";
import TimelineDot from "@material-ui/lab/TimelineDot";

import Popover from "@material-ui/core/Popover";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  popover: {
    pointerEvents: "none"
  },paper: {
    padding: theme.spacing(1)
  }
}));

export default function BasicTimeline() {
  const classes = useStyles();
  const [anchorEl,setAnchorEl] = React.useState(null);

  const handlePopoverOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handlePopoverClose = () => {
    setAnchorEl(null);
  };
  const open = Boolean(anchorEl);
  return (
    <>
      <Timeline>
        <TimelineItem>
          <TimelineSeparator>
            <TimelineDot
              onMouseEnter={handlePopoverOpen}
              onMouseLeave={handlePopoverClose}
            />
            <TimelineConnector />
          </TimelineSeparator>
          <TimelineContent>Eat</TimelineContent>
        </TimelineItem>
        <TimelineItem>
          <TimelineSeparator>
            <TimelineDot
              onMouseEnter={handlePopoverOpen}
              onMouseLeave={handlePopoverClose}
            />
            <TimelineConnector />
          </TimelineSeparator>
          <TimelineContent>Code</TimelineContent>
        </TimelineItem>
        <TimelineItem>
          <TimelineSeparator>
            <TimelineDot
              onMouseEnter={handlePopoverOpen}
              onMouseLeave={handlePopoverClose}
            />
          </TimelineSeparator>
          <TimelineContent>Sleep</TimelineContent>
        </TimelineItem>
      </Timeline>

      <Popover
        id="mouse-over-popover"
        className={classes.popover}
        classes={{
          paper: classes.paper
        }}
        open={open}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: "bottom",horizontal: "left"
        }}
        transformOrigin={{
          vertical: "top",horizontal: "left"
        }}
        onClose={handlePopoverClose}
        disableRestoreFocus
      >
        <Typography>I use Popover.</Typography>
      </Popover>
    </>
  );
}

正在运行的演示：-https://codesandbox.io/s/headless-grass-9k2rf?file=/demo.js:0-2538