Блог

В настоящее время я использую simple-menu пользовательский интерфейс material, как показано в codesandbox здесь. В моем приложении react я отображаю это меню в диалоговом окне primereact.

Однако мое главное требование — отображать выпадающий список в диалоговом окне, чтобы, когда пользователь что-то выбирает, его можно было выбрать, и я мог что-то сделать на основе этого. Например, если пользователь выбирает Car , я вижу, что он выбран. Кроме того, у меня есть некоторые значения, связанные с каждой записью. Например, Company имеет значение 0 , Car имеет значение 1 и Office имеет значение 2 .

Итак, я планирую иметь несколько кнопок в диалоговом окне, чтобы после выбора элемента из списка и Ok выбора кнопки я мог отправить значение, связанное с выбранным элементом, в вызове веб-сервиса.

Ближайший, который я смог найти, — simplelist:

https://material-ui.com/components/lists/#simple-list

Но ничего похожего на выпадающий список. Я что-то здесь упускаю?

Подробная информация:

Диалоговое окно выглядит следующим образом:

И, допустим, когда я выбираю элемент, скажем Car , он не будет отображаться Car , но будет отображаться Open Menu то, что я не ищу.

Чего я добился, так это того, что когда раскрывающийся список открывается и выбирается какой-либо параметр, пользователи могут видеть, что они выбрали, а выпадающий список не закрывается, когда выбран какой-либо параметр, и в консоли вы можете увидеть, какой параметр выбран по номеру индекса.

Вы можете следовать этому коду:

 import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  }
}));

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [visval, setVisval] = useState("Open Menu");

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
    //console.log(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const classes = useStyles();
  const [selectedIndex, setSelectedIndex] = React.useState();

  const handleListItemClick = (event, index) => {
    setSelectedIndex(index);
    handleClose();
    //console.log(index);
    if (index === 0) {
      setVisval("Company");
    } else if (index === 1) {
      setVisval("Car");
    } else {
      setVisval("Office");
    }
  };

  return (
    <div>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        {visval}
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem
          data-my-value={1}
          selected={selectedIndex === 0}
          onClick={(event) => handleListItemClick(event, 0)}
        >
          Company
        </MenuItem>
        <MenuItem
          data-my-value={2}
          selected={selectedIndex === 1}
          onClick={(event) => handleListItemClick(event, 1)}
        >
          Car
        </MenuItem>
        <MenuItem
          data-my-value={3}
          selected={selectedIndex === 2}
          onClick={(event) => handleListItemClick(event, 2)}
        >
          Office
        </MenuItem>
      </Menu>
    </div>
  );
}

  

Вы можете проверить обновленный и рабочий codesandbox здесь

Редактировать :

Я добился того, что вы просили, т.е. Меню, показывающее три опции, должно закрываться, когда мы выбираем какую-либо опцию, и то же самое должно быть видно на месте Open Menu . Но я увидел, что код больше не используется повторно и становится слишком большим (я знал об этом).

Если вы хотите, чтобы ваш код был сведен к минимуму, следуйте приведенному ниже предложению

ПРЕДЛОЖЕНИЕ: я видел, что Material-ui autocomplete просто выполняет работу с чистым кодом. Он предоставляет вам набор опций, таких как a dropdown menu , и когда пользователь выбирает что-то, выбранный вариант виден пользователю.

Ссылка на рабочую демонстрацию

Вы можете перенести тот же код в содержимое вашего диалогового окна, и он будет работать нормально.