reactjs - 是否可以使用菜单选项打开另一个菜单？

Question

目前我可以通过单击菜单触发器来打开菜单，并且效果很好。我现在正在尝试实现一个过程，以便我可以打开菜单-a，从菜单-a 中选择一个选项，然后使用滑入方法打开菜单-b。这个模块有可能吗？

Answer 1

您可以使用菜单作为受控组件来声明应该打开哪些菜单以及关闭哪些菜单。例如：

export default class ControlledExample extends Component {
  state = {
    opened1: false,
    opened2: false,
  }

  render() {
    return (
      <MenuContext style={{ flexDirection: 'column', padding: 30 }}>
        <Menu
          opened={this.state.opened1}
          onBackdropPress={() => this.setState({ opened1: false })}
          onSelect={() =>
            this.setState({
              opened1: false,
              opened2: true,
            })}
        >
          <MenuTrigger
            onPress={() => this.setState({ opened1: true })}
            text="Select option"
          />
          <MenuOptions>
            <MenuOption value={1} text="One" />
            <MenuOption value={2} text="Two" />
            <MenuOption value={3} text="Three" />
          </MenuOptions>
        </Menu>
        <Menu
         renderer={SlideInMenu}
          opened={this.state.opened2}
          onBackdropPress={() => this.setState({ opened2: false })}
          onSelect={() => this.setState({ opened2: false })}
        >
          <MenuTrigger />
          <MenuOptions>
            <MenuOption value={1} text="One *" />
            <MenuOption value={2} text="Two *" />
            <MenuOption value={3} text="Three *" />
          </MenuOptions>
        </Menu>
      </MenuContext>
    )
  }
}