Question

材料用户界面版本：1.2.1

我有一个Menu组件，当单击“ Hello”按钮时显示MenuItem，但是当我单击该按钮时，整个网页被冻结（无法再滚动），并且MenuItem不显示……什么是我的代码有问题吗？

以下是菜单组件的调用方式

import TestMenu from '../HeroMenu/TestMenu';

return (
  <TestMenu
    menuList={menuList}
    item={item}
    config={config}
  />
);

实际组件的代码

import React, { PureComponent } from 'react';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Button from '@material-ui/core/Button';

type Props = {
  menuList: Object,
  item: String,
  config: String,
};

class TestMenu extends PureComponent<Props> {
  state = {
    open: false,
    anchorEl: undefined,
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  handleMenuItem = (i, item, config) => {
    window.location.href = `/${item.url.split(config.wp_url)[1].slice(0,
      -1)}/${i.url.split(config.wp_url)[1].slice(0, -1)}`;
  };

  handleClick = (event) => {
    this.setState({ open: !this.state.open, anchorEl: event.currentTarget });
    console.log('Opeining Mneu!!!');
  };

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

    return (
      <div style={{ display: 'inline-block', position: 'relative' }}>
        <Button
          key={this.props.item.ID}
          variant="text"
          onClick={this.handleClick}
          style={{ color: '#D8EDFE' }}
        >
          Hello
        </Button>

        <Menu
          style={{ marginRight: '8vw' }}
          open={open}
          onClose={this.handleClose}
          anchorEl={anchorEl}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'Left' }}
          getContentAnchorEl={null}
        >
          {this.props.menuList.map(i => (
            <MenuItem
              key={i.ID}
              onClick={() => this.handleMenuItem(i, this.props.item, this.props.config)}
            >
              {i.title}
            </MenuItem>
        ))}
        </Menu>
      </div>
    );
  }
}


export default TestMenu;

我是否对anchorEl属性或其他原因有误？

单击按钮时不显示Material-ui菜单

0 个答案: