Reactjs 材料界面-单击菜单按钮打开所有可用菜单项

我在材质UI方面遇到了一个小问题。每次我点击一个按钮打开一个特定的下拉菜单项，它就会打开应用程序栏中所有可用的下拉菜单项。我确实更改了“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>
    );
  }
}

class MaterialTest扩展了组件{
状态={
主播：空
};
handleClick=事件=>{
this.setState（{ancorel:event.currentTarget}）；
};
handleClose=（）=>{
this.setState（{ancorel:null}）；
};
render（）{
const{anchorEl}=this.state；
常量开=布尔值（主播）；
返回(
家
产品运输
查看最新SKU
添加新SKU
进出口
桌子
库存
站点清单
仓库存货
添加新库存
厂商信息
);
}
}

---

有什么想法吗？谢谢

这可能是因为在设置anchorEl时所有菜单都被打开了。open prop只检查Boolean（ancorel），它们都共享相同的状态（因此，每当它返回true时，它们都会打开）

---

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

这可能是因为在设置anchorEl时所有菜单都被打开。open prop只检查Boolean（ancorel），它们都共享相同的状态（因此，每当它返回true时，它们都会打开）

您可以尝试在状态中设置anchorEl2、anchorEl3等，并相应地更改每个菜单和按钮