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

Question

Я создаю простую иконку выпадающего меню с использованием 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> 
    ); 
)}; 

Answer 1

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

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

Answer 2

В моем случае я должен добавить 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} /> 

Answer 3

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

Согласно 300ms tap delay, gone away By Jake Archibald

браузеры остановили ожидания 300 мс для двойных нажатий и РЕАКТ OnClick оленья кожа дают нам надлежащую ручку.

и По react-tap-event-plugin git page

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

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

Импорт:

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

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

injectTapEventPlugin();