反应的材料 UI 中的下拉列表替代方案

Question

我目前正在使用simple-menu 的材料 UI，如codesandbox here 所示。在我的 react 应用程序中，我在 primereact 对话框中显示此菜单。

但是，我的主要要求是在对话框中显示一个下拉列表，以便当用户选择某些内容时，可以选择它并且我可以根据它做一些事情。 例如，如果用户选择Car，我可以看到它被选中。另外，我有一些与每个条目相关的值。 例如，Company 的值为 0，Car 的值为 1，Office 的值为 2。

所以我计划在对话框中添加一些按钮，以便在选择列表中的项目并选择 Ok 按钮后，我可以在 web 服务调用中发送与所选项目关联的值。

我能找到的最接近的是 simplelist：

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

但没有什么接近下拉列表。我在这里错过了什么吗？

更多信息：

对话框如下所示：

假设当我选择一个项目时，假设是Car，它不会显示Car，但会显示我不想要的Open Menu。

Answer 1

What I have achieved is when the dropdown is opened and some option is selected then users can see what they have selected and dropdown doesn't close when some option is selected and in the console you can see what option is selected by index号码。

您可以按照这个代码：

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 here

编辑：

我已经实现了您的要求，即当我们选择某个选项时，显示三个选项的菜单应该关闭，并且应该在 Open Menu 的位置看到相同的选项。但我看到的是代码不再可重用并且变得太大（我意识到这一点）。

如果您希望代码最小化，请遵循以下建议

建议： 我看到 Material-ui 的 autocomplete 只是用干净的代码完成了工作。 它为您提供了一组选项，例如 dropdown menu，当用户选择某项时，用户会看到所选选项。

Link to the Working Demo

您可以将相同的代码迁移到对话框的内容中，它会正常工作。