Question

我需要帮助来自材料-ui的react app和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，您可以覆盖默认行为，因此您需要使用IconMenu＆＃39; open道具并告诉它何时打开（true）或关闭（假）。

您需要在组件中包含一些代码，用于在{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>
  );
}

所以现在我们已经有了一个菜单组件可以更新的状态，它将决定菜单是否应该打开以及哪个菜单传递到开放道具中。

React app - IconMenu未在Click事件上展开。

1 个答案: