Material-UI - 单击菜单按钮打开所有可用的菜单项答案

【问题标题】：Material-UI - Click on Menu Button opens all Menu Items availableMaterial-UI - 单击菜单按钮打开所有可用的菜单项
【发布时间】：2018-10-16 02:44:12
【问题描述】：

我在使用 Material-UI 时遇到了一个小问题。就是每次我单击按钮打开特定的下拉菜单/菜单项时，它都会打开 AppBar 中可用的所有下拉菜单/项目。我确实更改了“打开”变量名，但它只是给了我一个错误。 Material-UI 文档不包含两个或更多下拉菜单的示例。

这是我的代码：

class MaterialTest extends Component {
  state = {
    anchorEl: null
  };

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };
  render() {
    const { anchorEl } = this.state;
    const open = Boolean(anchorEl);

    return (
      <div style={mainDiv}>
        <AppBar position="static" color="default" style={barStyle}>
          <Toolbar style={toolStyle}>
            <NavLink to="/">
              <Button>Home</Button>
            </NavLink>
            <Button
              aria-owns={anchorEl ? 'product-shipping' : null}
              aria-haspopup="true"
              onClick={this.handleClick}
            >
              Product Shipping
            </Button>
            <Menu
              id="product-shipping"
              anchorEl={anchorEl}
              open={open}
              onClose={this.handleClose}
            >
              <NavLink to="viewAll">
                <MenuItem onClick={this.handleClose}>View Latest SKUs</MenuItem>
              </NavLink>
              <NavLink to="addSku">
                <MenuItem onClick={this.handleClose}>Add New SKU</MenuItem>
              </NavLink>
              <MenuItem onClick={this.handleClose}>Import / Export</MenuItem>
              <MenuItem onClick={this.handleClose}>Tables</MenuItem>
            </Menu>

            <Button
              aria-owns={anchorEl ? 'inventory' : null}
              aria-haspopup="true"
              onClick={this.handleClick}
            >
              Inventory
            </Button>
            <Menu
              id="inventory"
              anchorEl={anchorEl}
              open={open}
              onClose={this.handleClose}
            >
              <NavLink to="viewInventory">
                <MenuItem onClick={this.handleClose}>Site Inventory</MenuItem>
              </NavLink>
              <MenuItem onClick={this.handleClose}>
                Warehouse Inventory
              </MenuItem>
              <MenuItem onClick={this.handleClose}>Add New Inventory</MenuItem>
            </Menu>

            <Button
              aria-owns={anchorEl ? 'vendor-information' : null}
              aria-haspopup="true"
              onClick={this.handleClick}
            >
              Vendor Information
            </Button>

          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

有什么想法吗？谢谢

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这可能是因为设置了 anchorEl 时所有菜单都在打开。 open 属性仅检查 Boolean(anchorEl) 并且它们都共享相同的状态（因此，只要它返回 true，它们都会打开）

您可以尝试在状态中设置anchorEl2、anchorEl3等，并相应地更改每个Menu和Button。

【讨论】：