Question

我在Material-UI上遇到了一个小问题。而且是每次我单击按钮打开特定的下拉菜单/菜单项时，它都会打开AppBar中所有可用的下拉菜单/项目。我确实更改了'open'变量名称，但是它给了我一个错误。 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>
    );
  }
}

有什么想法吗？谢谢

Answer 1

可能是因为在设置anchorEl时，所有菜单都已打开。打开道具只检查Boolean（anchorEl），它们都共享相同的状态（因此，只要返回true，它们都将打开）

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

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

1 个答案: