雖然動態創建具有反應和材料的菜單項ui爲什麼onTouchStart自動執行功能

第一次發佈，我很高興地說，我終於有一些值得問的東西！我要求進一步擴大我對JavaScript & React的理解，我很欣賞所有反饋。雖然動態創建具有反應和材料的菜單項ui爲什麼onTouchStart自動執行功能

我目前正在編寫一些前端代碼，並創建了一個帶有material-ui的leftNav。創建菜單時，我想我會測試自己對JavaScript的理解並作出反應，並努力創作一個將創建菜單的功能，而不必一遍又一遍地寫入jsx <MenuItem props={}> </MenuItem>，這很簡單，而且我很相當興奮地得到它的工作。這是反應組件內部的render方法：

<LeftNav className={'animated ' + this.state.animation} 
        open={this.props.open} 
        style={style.leftNav} 
        width={220} 
        key={0}> 
       <Card style={style.card}> 
        <CardHeader avatar={null} 
           style={style.cardHeader} 
           zDepth={2}> 
         <Avatar size={65} 
           style={style.avatar} 
           src={avatarUrl} 
           onClick={ this._handleOpenSnackbar}/> 
        </CardHeader> 
       </Card> 
       <br/> 
       {this._createMenu() } 
      </LeftNav>

{this._createMenu() }將創造一切MenuItem的I所需的一切似乎完美，直到我需要單擊事件處理程序添加到每個項目（OBV）。如果我只是將<MenuItem props={}> </MenuItem>疊加在jsx上，它會更簡單。

我只是增加了一個開關菜單來測試性能，但現在 onTouchTap={_routeHandler.call(prop)}爲executing最後的測試案例，並自動路由僅在點擊後的路由，而不是。在我看來，我認爲每個MenuItem都會有其各自的點擊事件處理程序，並且它們都有，但最後的測試用例總是被執行，儘管break。

我通過返回一個匿名函數解決了問題，然後根據傳入this的_routeHandler()上下文中的道具做了一些防護路由。

我問的是，爲什麼需要切換案例才能返回onTapTouch事件的匿名函數才能正常工作？我認爲onTapTouch只會在單擊MenuItem時觸發。

我很難過，並且假設我還沒有完全理解React的一些內部工作原理。

下面是method，它動態地創建我的菜單。

歡迎任何反饋意見。

謝謝

_createMenu =() => { 
    let menuOptionsAndIcons = { 
      'About me': <i className="fa fa-male" style={style.icons}/>, 
      'Skills': <i className="fa fa-certificate" style={style.icons}/>, 
      'Music': <i className="fa fa-music" style={style.icons}/>, 
      'Interests': <i className="fa fa-cogs" style={style.icons}/> 
     }, 
     menu = []; 

    function _routeHandler() { 
     switch (this) { 
      case 'About me': 
       return function() { 
        if (typeof window !== 'undefined') 
         window.location.href = '' + 'http://' + window.location.host + '/about_me'; 
       }; 
       break; 
      case 'Skills': 
       return function() { 
        if (typeof window !== 'undefined') 
         window.location.href = '' + 'http://' + window.location.host + '/skills'; 
       }; 
       break; 
      case 'Music': 
       return function() { 
        if (typeof window !== 'undefined') 
         window.location.href = '' + 'http://' + window.location.host + '/music'; 
       }; 
       break; 
      case 'Interests': 
       return function() { 
        if (typeof window !== 'undefined') 
         window.location.href = '' + 'http://' + window.location.host + '/interests'; 
       }; 
       break; 
      default: 
       break; 
     } 
    } 

    for (var prop in menuOptionsAndIcons) { 
     if (menuOptionsAndIcons.hasOwnProperty(prop)) { 
      menu.push(<MenuItem leftIcon={menuOptionsAndIcons[prop]} 
           primaryText={ prop } 
           style={style.menuItem} 
           onTouchTap={_routeHandler.call(prop)} 
           key={prop} 
           rippleColor={"#FFFAE8"} 
           className="animated fadeInLeft"/>) 
     } 
    } 

    return menu 
};

來源

2016-02-17 Vahlk

什麼麻煩你已經添加單擊事件處理程序，每個項目？根據你知道如何做到這一點，對你來說應該很容易。 –

麻煩主要是理解爲什麼實現工作後，使每個開關案件返回一個具有所需的上下文的匿名函數;不應該'onTouchTap'道具只能調用「點擊觸摸」功能？ onTouchTap'在頁面加載時觸發，就好像它在沒有事件發生的情況下執行函數一樣。 – Vahlk

在事件處理程序，你應該使用這樣

onClick={()=>this.yourfunction()}

不

onClick={this.yourfunction()}

來源

2016-02-17 07:33:37 jackypan1989

不應該只是'onClick = {this.yourfunction}'？ –

是的，兩者都是對的。但是，如果你想添加。調用或參數它應該使用數組函數或函數實例。這就是爲什麼onTap函數會在每個渲染組件觸發的原因。 – jackypan1989

雖然動態創建具有反應和材料的菜單項ui爲什麼onTouchStart自動執行功能

回答

相關問題