Menu rozwijane Reakt Material-UI nie działa

Question

Tworzę proste menu rozwijane z ikonami przy użyciu Materialnego interfejsu użytkownika. Ale po wyrenderowaniu glifu i po kliknięciu na nim wyświetlany jest żaden obraz. Oto kod -

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

Miałem podobny problem. Rozwiązaniem było dodanie tego gdzieś w aplikacji. Nie jestem pewien, czy to ważne gdzie, ale dodałem go na wyższym poziomie, jak to możliwe:

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

Answer 2

W moim przypadku muszę dodać injectTapEventPlugin jak również zmiany obsługi.

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

Po prostu chciałem dodać powód dodania injectTapEventPlugin.

Według 300ms tap delay, gone away By Jake Archibald

przeglądarek zatrzymał 300ms czekających na podwójnych kranów i reagować na onClick robi nam właściwego uchwytu.

i zgodnie react-tap-event-plugin git page

Facebook nie planuje na wspieranie imprez Kranik (nr 436), ponieważ przeglądarek mocowania/zdejmowania opóźnienie kliknięcia. Niestety zajmie to dużo czasu, zanim wszystkie przeglądarki mobilne (w tym iOS "UIWebView) będą mogły być aktualizowane.

To dlatego musimy wstrzyknąć wtyczkę. O odpowiednim rozwiązaniu zdecydowałem się dodać paczkę i wstrzyknąć ją do konstruktora aplikacji (wyższy poziom mam).

Import:

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

i wewnątrz konstruktora:

injectTapEventPlugin();