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

Question

我正在使用 Material UI 创建一个简单的图标下拉菜单。但是在渲染字形之后出现并且在单击它之后没有显示 MenuItems 。这是代码-

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

我遇到了类似的问题。解决方案是将其添加到应用程序的某处。我不确定它在哪里是否重要，但我尽可能在更高级别添加它：

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 毫秒并且 React 的 onClick 没有给我们正确的句柄。

并根据 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.

这就是我们需要注入插件的原因。关于正确的解决方案，我决定添加包并将其注入应用程序的构造函数（我拥有的更高级别）。

进口：

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

在构造函数中：

injectTapEventPlugin();

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

React Material-UI dropdown menu not working

drop-down-menu

reactjs

material-ui

iconmenu