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事件上展开。

回答

相关问题