Reagire Materiale: menu a discesa dell'interfaccia utente non funzionante

Question

Sto creando un menu a discesa semplice icona utilizzando l'interfaccia utente materiale. Ma dopo il rendering del glifo appare e non viene mostrato MenuItems dopo aver cliccato su di esso. Ecco il codice -

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

Ho avuto un problema simile. La soluzione era quella di aggiungere questo da qualche parte nell'app. Non so se è importante dove, ma ho aggiunto ad un livello più alto possibile:

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

Answer 2

Nel mio caso devo aggiungere injectTapEventPlugin così come gestore di cambiamento.

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

Volevo semplicemente aggiungere il motivo per aggiungere injectTapEventPlugin.

Secondo 300ms tap delay, gone away By Jake Archibald

Browser fermati 300ms attesa di doppi rubinetti e di reagire onClick ci ha colpiti invia l'apposita maniglia.

e Secondo react-tap-event-plugin git page

Facebook non ha intenzione di sostenere eventi rubinetto (# 436), perché i browser sono fissaggio/rimuovere il ritardo click. Sfortunatamente ci vorrà molto tempo prima che tutti i browser mobili (incluso UIWebView di iOS) possano essere aggiornati.

Ecco perché è necessario iniettare il plug-in. Sulla soluzione corretta, ho deciso di aggiungere il pacchetto e inserirlo nel costruttore dell'app (il livello higer che ho).

L'importazione:

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

E dentro il costruttore:

injectTapEventPlugin();