Выпадающее меню "React Material-UI" не работает

Я создаю простое раскрывающееся меню значков с использованием Material UI. Но после отображения глифа появляется и MenuItems отображается после нажатия на него. Вот код -

import {FontIcon, MenuDivider, IconMenu, IconButton} from 'material-ui' ;
let MoreVertIcon = require('material-ui/lib/svg-icons/navigation/more-vert');
const MenuItem = require('material-ui/lib/menus/menu-item');
var PostCard = React.createClass({
  render: function(){
    let button = (
            <IconButton
                touch={true}
                tooltip='Click to see menu.'
                tooltipPosition='bottom-left'>
                <MoreVertIcon />
            </IconButton>
        );
    return (
      <div>
        <IconMenu iconButtonElement={button}>
              <MenuItem primaryText="Refresh" />
                          <MenuItem primaryText="Send feedback" />
                          <MenuItem primaryText="Settings" />
                          <MenuItem primaryText="Help" />
                          <MenuItem primaryText="Sign out" />
        </IconMenu>     
      </div>
    );
)};

Ответ 1

У меня была аналогичная проблема. Решение заключалось в том, чтобы добавить это в приложение. Я не уверен, имеет ли это значение, но я добавил его на более высокий уровень:

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

Ответ 2

Просто хотел добавить причину добавления injectTapEventPlugin.

В соответствии с 300 мс задержки отвода, ушли Джейком Арчибальдом

Браузеры перестали ждать 300 мс для двойных кранов и реагировать onClick не дают нам правильного дескриптора.

и согласно ссылка-ответ-событие-плагин git страница

Facebook не планирует поддержку событий нажатия (# 436), поскольку браузеры фиксируют/удаляют задержку нажатия. К сожалению, это займет много времени, прежде чем все мобильные браузеры (включая iOS 'UIWebView) будут обновлены.

Вот почему нам нужно вставлять плагин. О правильном решении я решил добавить пакет и ввести его в конструктор App (более высокий уровень, который у меня есть).

Импорт:

import injectTapEventPlugin from 'react-tap-event-plugin';

И внутри конструктора:

injectTapEventPlugin();

Ответ 3

В моем случае я должен добавить injectTapEventPlugin, а также обработчик изменений.

var injectTapEventPlugin = require("react-tap-event-plugin");
const DropDownMenu = require('material-ui/lib/drop-down-menu');

...

injectTapEventPlugin(); // in constructor 

...

  handleChange(event, selectedIndex, menuItem) {
    this.setState({menu: event.target.value });
  }

...
  // in render
  let menuItems = [
       { payload: '0', text: 'Mon - Sun' },
       { payload: '1', text: 'Mon - Sat' },
       { payload: '2', text: 'Mon - Fri' },
       { payload: '3', text: 'Mon - Fri / Mon - Thu' },
    ];
...
  // in render return

  <DropDownMenu menuItems={menuItems} selectedIndex={this.state.menu} onChange={this.handleChange} />