react-mdc-web Implement Menu component

Mar 21 '17 16:03 kradio3

2b1cc3d13575cc5b2636293116ff758510d9adf2

Apr 06 '17 13:04 kradio3

How to find out which menu item has been clicked on? Method which is responsible for closing the popup doesn't pass any parameters

In my own implementation I've attached an event listener MDCSimpleMenu:selected like that:

var menuElement = document.querySelector('.mdc-menu-anchor > .mdc-simple-menu[for]');
var menu = new mdc.menu.MDCSimpleMenu(menuElement);
menu.listen('MDCSimpleMenu:selected', function (customEvent) {
  var item = customEvent.detail.item
})

Jun 05 '17 20:06 piotr-cz

Hi @piotr-cz, You can extend <MenuItem/> a little

<MenuItem onClick={() =>{console.log('item 1 clicked')}}> 
    Item 1 
</MenuItem>

If this solution works for you, i'll update docs

Jun 05 '17 22:06 kradio3

Yes, but then I have to attach listener to each item separately, adding an argument with a hint which item has been clicked on

<MenuItem onClick={ () => { this.handleMenuItemClick(1) }}>
  Item 1
</MenuItem>

It's not that bad at the end, but I was hoping that it's possible to attach the listener to the <Menu /> element like so:

<Menu onSelected={ this.handleMenuitemClick }>
  { this.props.menuItems.map(menuItem =>
    <MenuItem key={ menuItem.id }>
      { menuItem.name }
    </MenuItem>
  )}
</Menu>

Jun 06 '17 08:06 piotr-cz

Make a sense. I'll extend it. Thanks

Jun 07 '17 13:06 kradio3

Do you try to use foundation & adapter components from material-components-web, for example: https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu? Will it simplify and speedup component development in your point of view?

Jun 11 '17 13:06 dogada

Hi @dogada , Sure it's easier and faster to develop, but the components will have more complicated states and it will influence the performance. See also #9 there is the same question

Jun 12 '17 20:06 kradio3

Hello @kradio3

Did you update the documentation ? because I don't know which solution you recommend ?

Jan 19 '18 08:01 ataliadvanstep