Material UI 弹出窗口无法与 React class 组件一起使用

Question

我没用过material UI，它的文档都是参考功能组件。我不明白为什么弹出窗口不起作用。每当我将鼠标悬停在文本上时，都会触发该功能，但会显示弹出窗口。我可以使用 this.props.classes 访问类。如果有人能提供帮助就太好了。

import React, { Component } from "react";
import Popover from "@material-ui/core/Popover";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";

const useStyles = (theme) => ({
  root: {
    backgroundColor: "red",
    height: "30px",
  },
  lable: {
    transform: "translate(5px, 2px) scale(1)",
    pointerEvents: "none",
    width: "100%",
    height: "100%",
    padding: "10px",
    color: "red",
  },
  popover: {
    pointerEvents: "none",
    color:"pink"
  },
  paper: {
    padding: theme.spacing(1),
  },
  etc:{
    color: "red"
  }
});

class SomeThing extends Component {
  open;
constructor(props){
  super(props)
  this.handlePopoverClose = this.handlePopoverClose.bind(this);
    this.handlePopoverOpen = this.handlePopoverOpen.bind(this);
  this.state={
    anchorEl: null,
  }
}
componentDidMount(){
  this.open = Boolean(this.state.anchorEl);
}
  handlePopoverOpen = (event) => {
    console.log("triggered!!!", event.currentTarget.innerText);
    this.setState({ anchorEl: event.currentTarget.innerText });
  };

  handlePopoverClose = () => {
    console.log("triggered again!!!", this.props);
    this.setState({ anchorEl: null });
  };
  render() {
    return (
      <div>
        <Typography
          aria-owns={this.open ? "mouse-over-popover" : undefined}
          aria-haspopup="true"
          className={this.props.classes.etc}
          onMouseEnter={this.handlePopoverOpen}
          onMouseLeave={this.handlePopoverClose}
        >
          Hover with a Popover.
        </Typography>
        <Popover
          id="mouse-over-popover"
          className={this.props.classes.popover}
          classes={{
            paper: this.props.classes.paper
          }}
          open={this.open}
          anchorEl={this.state.anchorEl}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
          onClose={this.handlePopoverClose}
          disableRestoreFocus
        >
          <Typography>I use Popover.</Typography>
        </Popover>
      </div>
    );
  }
}

export default withStyles(useStyles)(SomeThing);

Answer 1

您可以在 render 方法中定义 open；这样，open 将始终是 boolean 而不会设置为 undefined — 这就是它不起作用的原因。

render() {
  const open = Boolean(this.state.anchorEl);

  return (
    <div>
      <Typography
        aria-owns={open ? "mouse-over-popover" : undefined}
        aria-haspopup="true"
        className={this.props.classes.etc}
        onMouseEnter={this.handlePopoverOpen}
        onMouseLeave={this.handlePopoverClose}
      >
        Hover with a Popover.
      </Typography>
      ...
    </div>
  );
}

Material UI 弹出窗口无法与 React class 组件一起使用

Material UI popover not working with react class component

popover

reactjs

material-ui