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的原因。

根据300ms tap delay, gone away By Jake Archibald

浏览器停止等待300毫秒进行双击并且反应点击没有给我们正确的句柄。

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

Facebook并未计划支持点击事件（＃436），因为浏览器正在修复/消除点击延迟。不幸的是，所有移动浏览器（包括iOS的UIWebView）都需要花费很多时间才能更新。

这就是为什么我们需要注入插件。关于正确的解决方案，我决定添加包并将其注入App的构造函数（我的高级别）。

导入：

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

在构造函数中：

injectTapEventPlugin();

Answer 3

在我的情况下，我必须添加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} />

React Material-UI下拉菜单无效

3 个答案: