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

瀏覽器停止等待300ms的雙龍頭和反應的onClick犯規給了我們正確的處理。

，並根據react-tap-event-plugin git page

Facebook正在不支持點擊事件（＃436），因爲瀏覽器都固定/卸下點擊延遲計劃。不幸的是，在所有的移動瀏覽器（包括iOS的UIWebView）將會並且可以更新之前需要很長時間。

這就是爲什麼我們需要注入插件。 關於正確的解決方案，我決定添加包並將其注入到應用程序的構造函數中（我擁有更高的級別）。

進口：

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

而且構造函數中：

injectTapEventPlugin();