React應用程序 - IconMenu未在Click事件上展開。

我需要來自material-ui的反應app和IconMenu的幫助。沒有結果:(React應用程序 - IconMenu未在Click事件上展開。

有下面的代碼學習很多類似的問題，我想觸發菜單手動展開 - 我需要它在測試框架來模擬點擊子菜單項

const Menu =() => { 
    return (
     <IconMenu 
      iconButtonElement={<FlatButton style={{height: '100%'} 
      } 
      onClick={() => console.log('clicked!')} 
      label={'FooLabel'} 
      labelPosition='before' 
      />}> 
      <MenuItem primaryText="submenu" leftIcon={<SignOutIcon />} /> 
     </IconMenu> 
    ); 
};

的問題是，。當我點擊菜單項，將觸發onClick事件，但菜單是不是在所有的擴展：

演示：https://imgur.com/32RzHcB

我試圖用dispatchEvent函數發送自定義事件，但即使onClick也未觸發。是我錯過了什麼？

來源

2017-10-07 brxie

你可以顯示你的自定義事件的代碼？ – Freez

VAR EVT =新自定義事件（「點擊」， { 細節：{ 時間：新的日期（）， } } ）; panel.dispatchEvent（evt）; – brxie

它看起來像通過使用onClick你重寫默認行爲，所以你需要使用IconMenu的open道具，並告訴它當你想要它打開（true）或關閉（false）。

你需要在你的組件中有一些代碼在true和false之間切換open。要做到這一點，組件需要是有狀態的而不是功能性的。如果你還沒有這樣做之前，檢查出的反應文檔converting a function to a class

嘗試：

class Menu extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     menuOpen: false 
    }; 
    } 

    _toggleOpen =() => { 
    this.setState({ 
     menuOpen: !this.state.menuOpen 
    }); 
    }; 

    _handleClick =() => { 
    this._toggleOpen(); 
    // .. do your other on click stuff here 
    } 

    render(
    <IconMenu 
     iconButtonElement={<FlatButton style={{height: '100%'} 
     } 
     onClick={this._handleClick} 
     label={'FooLabel'} 
     labelPosition='before' 
     open={this.state.menuOpen} 
     />}> 
     <MenuItem primaryText="submenu" leftIcon={<SignOutIcon />} /> 
    </IconMenu> 
); 
}

所以現在我們已經有了一個狀態菜單組件可以更新，這將決定是否在菜單應開放，並被傳遞到開放的道具。

來源

2017-10-07 09:20:57

React應用程序 - IconMenu未在Click事件上展開。

回答

相關問題