Material-ui Меню не отображается при нажатии кнопки

Материал-версия: 1.2.1

У меня есть компонент Menu, который показывает MenuItem при нажатии кнопки "Hello", но когда я нажал кнопку, вся веб-страница зависла (больше не могу прокручивать), а 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 или что-то еще?

0 ответов

Другие вопросы по тегам