React应用程序-IconMenu在Click事件上未展开。

Question

I need help with react app and IconMenu from material-ui. Studying many similar issues without results :(

Having following code, I want to trigger menu expand manually - I need it in tests framework to simulate clicking on submenu item.

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

The problem is that, when I do click on menu item, the onClick event is triggered, but menu is not expanded at all:

demo: https://imgur.com/32RzHcB

I was trying to send custom event by dispatchEvent function, but even onClick is not triggered. Is something what i missed?

Answer 1

It looks like by using onClick you override the default behaviour, so you'll need to use IconMenu's open prop and tell it when you want it to be open (true) or closed (false).

You'll need to have some code in your component that toggles open between true and false. To do this, the component will need to be stateful instead of functional. If you haven't done this before, check out the react docs on converting a function to a class

Try:

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>
  );
}

so now we've got a state that the Menu component can update which will decide whether the menu should be open and which gets passed down into the open prop.