Question

我正在复制有关如何在Menus文档中使用Material-UI的说明。我确实在容器组件中呈现了具有Paper组件的按钮，但是当我单击它时，菜单没有显示出来。这是代码：

index.js - 容器组件

const styles = theme => ({
  root: theme.mixins.gutters({
    paddingBottom: 16
  })
});

class ProvidersPage extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    const { classes, providers } = this.props;

    return (
      <div>
        <Paper className={classes.root} elevation={4}>
          <ProviderList providers={providers} />
        </Paper>
      </div>
    );
  }
}

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

function mapStateToProps(state) {
  return {
    providers: state.providers
  };
}

export default connect(
  mapStateToProps
)(withStyles(styles)(ProvidersPage));

ProvidersList.js 组件

const styles = theme => ({
  actions: {
    color: theme.palette.text.secondary,
  },
  title: {
    flex: '1',
  }
});

class ProviderList extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    const { classes, providers } = this.props;

    return (
      <Fragment>
        <Toolbar disableGutters>
          <div className={classes.title}>
            <Typography variant="title">
              Providers
            </Typography>
          </div>
          <div className={classes.actions}>
            <ProviderMenu />
          </div>
        </Toolbar>
      </Fragment>
    );
  }
};

ProviderList.propTypes = {
  classes: PropTypes.object.isRequired,
  providers: PropTypes.array.isRequired
};

export default withStyles(styles)(ProviderList);

ProviderMenu.js - 我的菜单组件包含菜单

class ProviderMenu extends React.Component {
  state = {
    anchorEl: null,
  };

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { anchorEl } = this.state;

    return (
      <div>
        <Button
          aria-owns={anchorEl ? 'simple-menu' : null}
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          Open Menu
        </Button>
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={this.handleClose}
        >
          <MenuItem onClick={this.handleClose}>Profile</MenuItem>
          <MenuItem onClick={this.handleClose}>My account</MenuItem>
          <MenuItem onClick={this.handleClose}>Logout</MenuItem>
        </Menu>
      </div>
    );
  }
}

export default ProviderMenu;

Answer 1

我也遇到了菜单无法打开的类似问题。我一直在尝试使MenuList作为一种解决方法，但是我真的不喜欢它需要多少额外的组件和代码。我将示例用于发现here的MenuList。

这不是最终答案。关于菜单为何无法打开的问题，我仍在寻找更好的答案。

编辑：找到了为什么菜单没有出现的原因。 react-dom版本16.2.x有一个错误，默认情况下会将其标记为隐藏。签出this article here。希望有帮助

React Material-UI下拉菜单在Paper内部无效

1 个答案: