reactjs - 如何将 popover MATERIAL-UI 功能组件转换为基于类的组件？

Question

我正在尝试将此功能组件转换为基于类的组件。我已经尝试了几个小时，但找不到将这些 const 变量放在组件中的位置。如果有人可以在基于类的组件中将其写出来，将不胜感激。

const useStyles = makeStyles(theme => ({
  typography: {
    padding: theme.spacing(2),
  },
}));
function SimplePopper() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  function handleClick(event) {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  }

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popper' : null;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Toggle Popper
      </Button>
      <Popper id={id} open={open} anchorEl={anchorEl} transition>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Paper>
              <Typography className={classes.typography}>The content of the Popper.</Typography>
            </Paper>
          </Fade>
        )}
      </Popper>
    </div>
  );
}

export default SimplePopper;

Answer 1

    import React, { Component } from "react";
    import { createMuiTheme } from "@material-ui/core/styles";
    import Typography from "@material-ui/core/Typography";
    import Button from "@material-ui/core/Button";
    import Fade from "@material-ui/core/Fade";
    import Paper from "@material-ui/core/Paper";
    import Popper from "@material-ui/core/Popper";
    import { withStyles } from "@material-ui/styles";

    const theme = createMuiTheme({
      spacing: 4
    });

    const styles = {
      typography: {
        padding: theme.spacing(2)
      }
    };
    class SimplePopper extends Component {
      constructor(props) {
        super(props);
        this.state = { anchorEl: null, open: false };
      }
      flipOpen = () => this.setState({ ...this.state, open: !this.state.open });
      handleClick = event => {
        this.state.ancherEl
          ? this.setState({ anchorEl: null })
          : this.setState({ anchorEl: event.currentTarget });
        this.flipOpen();
      };

      render() {
        const open = this.state.anchorEl === null ? false : true;
        console.log(this.state.anchorEl);
        console.log(this.state.open);
        const id = this.state.open ? "simple-popper" : null;
        const { classes } = this.props;
        return (
          <div>
            <Button
              aria-describedby={id}
              variant="contained"
              onClick={event => this.handleClick(event)}
            >
              Toggle Popper
            </Button>
            <Popper
              id={id}
              open={this.state.open}
              anchorEl={this.state.anchorEl}
              transition
            >
              {({ TransitionProps }) => (
                <Fade {...TransitionProps} timeout={350}>
                  <Paper>
                    <Typography className={classes.typography}>
                      The content of the Popper.
                    </Typography>
                  </Paper>
                </Fade>
              )}
            </Popper>
          </div>
        );
      }
    }

    export default withStyles(styles)(SimplePopper);