प्रतिक्रिया सामग्री-यूआई ड्रॉपडाउन मेनू काम नहीं कर रहा

Question

मैं सामग्री यूआई का उपयोग कर एक साधारण आइकन ड्रॉप-डाउन मेनू बना रहा हूं। लेकिन ग्लिफ को प्रस्तुत करने के बाद प्रकट होता है और 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 जोड़ने के लिए परिवर्तन हैंडलर के रूप में भी है।

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

बस इंजेक्शनटैपवेंट प्लगइन जोड़ने का कारण जोड़ना चाहता था।

-300ms tap delay, gone away By Jake Archibald

ब्राउज़र अनुसार डबल नल के लिए इंतज़ार कर 300 मि.से बंद कर दिया और प्रतिक्रिया के onClick नहीं करता है हमें उचित संभाल दे।

और react-tap-event-plugin git page

के अनुसार फेसबुक नल घटनाओं (# 436) का समर्थन क्योंकि ब्राउज़र फिक्सिंग कर रहे हैं/क्लिक में विलंब को दूर करने की योजना नहीं बना रहा है। दुर्भाग्य से सभी मोबाइल ब्राउज़र (आईओएस 'UIWebView सहित) में बहुत समय लगेगा और अपडेट किया जा सकता है।

Thats हमें प्लगइन इंजेक्ट करने की आवश्यकता क्यों है। उचित समाधान के बारे में, मैंने पैकेज जोड़ने और ऐप के निर्माता (मेरे पास उच्चतम स्तर) में इंजेक्ट करने का निर्णय लिया।

आयात:

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

और निर्माता के अंदर:

injectTapEventPlugin();