13

我正在使用 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>     
        );
    }
});
4

3 回答 3

21

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

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
于 2015-11-10T16:26:19.723 回答
5

只是想添加添加injectTapEventPlugin的原因。

根据300 毫秒的点击延迟，消失了由 Jake Archibald

浏览器停止等待 300 毫秒的双击，反应的 onClick 没有给我们正确的处理。

并根据react-tap-event-plugin git page

Facebook 不打算支持点击事件 (#436)，因为浏览器正在修复/删除点击延迟。不幸的是，所有移动浏览器（包括 iOS 的 UIWebView）都需要很长时间才能更新。

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

进口：

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

在构造函数内部：

injectTapEventPlugin();
于 2017-01-02T14:05:58.643 回答
1

在我的情况下，我必须添加 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} />
于 2015-11-13T21:50:53.533 回答