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

Posted 2023-02-21

【中文标题】React Material-UI 下拉菜单不起作用

【英文标题】：React Material-UI dropdown menu not working

【发布时间】：2016-02-06 03:12:28

【问题描述】：

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

【问题讨论】：

您找到解决方案了吗？这里有完全相同的问题...

【参考方案1】：

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

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

浏览器停止等待 300 毫秒的双击，并且 react 的 onClick 没有给我们正确的句柄。

根据react-tap-event-plugin git page

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

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

导入：

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

在构造函数内部：

injectTapEventPlugin();

【讨论】：

最佳答案 IMO

如果你使用 React +16.4 你不需要添加插件。只需添加 package.json 依赖项："react": "16.4.0", "react-dom": "16.4.0"

更新 react 到 16.13 后，我需要删除这个插件。但之后它的下拉菜单不起作用。

@romanown 你能详细说明一下吗？这应该在 React 16 及更高版本中得到解决。

我有项目使用 var injectTapEventPlugin = require("react-tap-event-plugin"); injectTapEventPlugin();将反应从 15.4 更新到 16.13 后，我有错误。所以我发现需要删除这个插件。我删除了这个。错误是出去。 buh 下拉菜单没有工作。我只删除了这 2 个字符串 var injectTapEventPlugin = require("react-tap-event-plugin"); injectTapEventPlugin();可能我需要编辑我的其他代码吗？我尝试v4的material-ui

【参考方案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 /> 

【讨论】：

如果我们有 2 个内容相同的下拉菜单怎么办？

【参考方案3】：

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

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

【讨论】：

仅供参考。现在已经通过 react v16+ 修复了这个问题。无需添加这些语句。有这些行实际上可能会减慢对用户的点击响应。