Material-UI - Нажмите на кнопку меню, чтобы открыть все доступные пункты меню - PullRequest
Новая
       13

Material-UI - Нажмите на кнопку меню, чтобы открыть все доступные пункты меню

0 голосов
/ 15 октября 2018

У меня небольшая проблема с Material-UI.И это то, что каждый раз, когда я нажимаю на кнопку, чтобы открыть конкретный раскрывающийся список / пункт меню, он открывает все раскрывающиеся списки / элементы, доступные в панели приложений.Я изменил имя переменной 'open', но вместо этого она выдаёт мне ошибку.Документация Material-UI не включает примеры двух или более выпадающих меню.

enter image description here

Вот мой код: 

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>
    );
  }
}

ЛюбойИдеи?Спасибо

1 Ответ

0 голосов
/ 15 октября 2018

Это может быть потому, что все меню открываются, когда установлен anchorEl.Открытая подпорка проверяет только логическое значение (anchorEl), и все они разделяют одно и то же состояние (поэтому, когда оно возвращает true, они все открываются)

Вы можете попробовать установить anchorEl2, anchorEl3 и т. Д. В состояние и изменитькаждое меню и кнопка соответственно.

...