React应用程序- IconMenu在单击事件时未展开。

Question

我需要来自material-ui的react应用程序和IconMenu的帮助。研究许多类似的问题却没有结果:(

有以下代码，我想触发菜单扩展手动-我需要它在测试框架，以模拟点击子菜单项。

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也没有被触发。是不是我错过了什么？

Answer 1

看起来像是使用onClick覆盖了默认行为，所以你需要使用图标菜单的open属性，并告诉它你想让它打开(真)还是关闭(假)。

您需要在组件中包含一些代码，用于在true和false之间切换open。为此，组件需要是有状态的，而不是功能性的。如果您以前没有这样做过，请查看converting a function to a class上的react文档

尝试：

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

所以现在我们得到了一个菜单组件可以更新的状态，它将决定菜单是否应该被打开，以及哪个被传递到打开的属性中。