Reactjs react物料界面中的下拉列表备选方案

我目前正在使用物料界面的

简单菜单

，如图所示。在我的react应用程序中，我在primereact对话框中显示此菜单

然而，我的主要要求是在对话框中显示一个下拉列表，以便当用户选择某个内容时，可以选择该内容，我可以根据该内容进行操作。 例如，如果用户选择了

汽车

，我可以看到它被选中。此外，我还有一些与每个条目关联的值。 例如，

Company

具有值

0

，

Car

具有值

1

，

Office

具有值

2

因此，我计划在对话框中设置一些按钮，以便在选择列表中的某个项目，并选择

Ok

按钮后，我可以在webservice调用中发送与所选项目关联的值

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

但没有什么能接近DrowDown列表。我是不是错过了什么

更多信息：

该对话框如下所示：

---

比如说，当我选择一个项目时，比如说，

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

import React，{useState}来自“React”；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles（（主题）=>({
根目录：{
宽度：“100%”，
最大宽度：360，
背景色：theme.palete.background.paper
}
}));
导出默认函数simplemu（）{
常量[anchorEl，setAnchorEl]=React.useState（null）；
const[visval，setVisval]=使用状态（“打开菜单”）；
常量handleClick=（事件：React.MouseEvent）=>{
Setancorel（事件当前目标）；
//console.log（event.currentTarget）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
const classes=useStyles（）；
常量[selectedIndex，setSelectedIndex]=React.useState（）；
const handleListItemClick=（事件、索引）=>{
设置选定的索引（索引）；
handleClose（）；
//控制台日志（索引）；
如果（索引==0）{
setVisval（“公司”）；
}else if（索引===1）{
setVisval（“汽车”）；
}否则{
setVisval（“办公室”）；
}
};
返回(
{visval}
handleListItemClick（事件，0）}
>
单位
handleListItemClick（事件，1）}
>
汽车
handleListItemClick（事件，2）}
>
办公室
);
}

您可以签出已更新和正在工作的

编辑：

我已经实现了您的要求，即，当我们选择某个选项时，显示三个选项的菜单应该关闭，并且在

打开菜单的位置应该可以看到该菜单。但我看到的是，代码不再是可重用的，而且变得太大了（我知道这一点）

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

建议：
我看到MaterialUI的
自动完成
只是用一个干净的代码来完成工作。
它为您提供了一组选项，如
下拉菜单
，当用户选择某个内容时，所选选项将被用户看到


您可以将相同的代码移植到对话框的内容中，它会很好地工作。
是的，首先使用material ui创建模态，然后将
simplelist
放入，因为modalI的内容添加了我拥有的对话框的屏幕截图，并显示了
打开菜单。但它并没有像我在帖子中提到的那样保留所选项目。那么您是说
simplelist
不会产生这个问题？此外，简单列表不会以下拉方式显示，对吗？就像您想要的一样，对话框在选择选项后应该打开，并且应该保留所选选项？如果这是你想要的，我会发布代码。不是真的。当用户单击UI中的某个按钮时，我已经有了一个对话框。在里面我有
打开菜单
按钮，如这里的codesandbox（）中所述。因此，当我选择某个项目时，下拉菜单关闭，不显示所选项目。如果我能回答更多问题，请告诉我。谢谢或者你可以发布你的代码，然后我可以让你知道如果有什么困惑。我的解决方案对你有用吗？所以当我选择某个东西时，它不会像你提到的那样自动关闭。是否可以使用选择为“显示”而不是“打开”菜单的选项将其关闭？是的，这可能是因为我现在有点忙，所以我将用更新的代码编辑答案。@Tan我已编辑了我的答案（代码，链接）但我看到的是，代码不再是可重用的，所以我建议您遵循我在回答中给出的建议，否则代码工作正常。