React Material-UI 下拉菜单不起作用

Question

I am creating a simple icon drop-down menu using Material UI. But after rendering the glyph appears and no MenuItems are shown after clicking on the it. Here is the code -

import { IconMenu, IconButton } from 'material-ui' ;
const MoreVertIcon = require('material-ui/lib/svg-icons/navigation/more-vert');
const MenuItem = require('material-ui/lib/menus/menu-item');

const PostCard = React.createClass({
    render: function() {
        let button = (
                <IconButton
                    touch={true}
                    tooltip='Click to see menu.'
                    tooltipPosition='bottom-left'>
                    <MoreVertIcon />
                </IconButton>
            );
        return (
            <IconMenu iconButtonElement={button}>
                <MenuItem primaryText="Refresh" />
                <MenuItem primaryText="Send feedback" />
                <MenuItem primaryText="Settings" />
                <MenuItem primaryText="Help" />
                <MenuItem primaryText="Sign out" />
            </IconMenu>     
        );
    }
});

Answer 1

I had a similar issue. Solution was to to add this somewhere in the app. I'm not sure if it matters where but I added it at a higher-level as possible:

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

Answer 2

Just wanted to add the reason to add injectTapEventPlugin.

According to 300ms tap delay, gone away By Jake Archibald

Browsers stopped waiting 300ms for double taps and react's onClick doesnt give us the proper handle.

and According to react-tap-event-plugin git page

Facebook is not planning on supporting tap events (#436) because browsers are fixing/removing the click delay. Unfortunately it will take a lot of time before all mobile browsers (including iOS' UIWebView) will and can be updated.

Thats why we need to inject the plugin. About the proper solution, I decided to add the package and inject it in the App's constructor (The higer level I have).

The import:

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

And inside the constructor:

injectTapEventPlugin();

Answer 3

In my case I have to add injectTapEventPlugin as well as change handler.

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} />