时间戳

首页 > 解决方案 > 反应的材料 UI 中的下拉列表替代方案

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

问题描述

我目前正在使用simple-menu材料 UI，如这里的代码框所示。在我的反应应用程序中，我在 Primereact 对话框中显示此菜单。

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

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

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

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

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

更多信息：

对话框如下所示：

在此处输入图像描述

比方说，当我选择一个项目时，比方说，Car它不会显示Car，但会显示Open Menu我不想要的。

标签： reactjsmaterial-ui

解决方案

我已经实现的是，当打开下拉列表并选择了某些选项时，用户可以看到他们选择的内容，并且在选择某些选项时就无法关闭，并且在控制台中您可以看到索引号选择了哪个选项。

您可以按照以下代码：

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

您可以在此处签出更新和工作的代码框

编辑 ：

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

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

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

链接到工作演示

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

推荐阅读