MUI 通过按钮自动完成

Question

我正在创建一个应用程序，适合从按钮显示选择菜单。像这样的东西：

import React from "react";
import AutoComplete from "@mui/material/Autocomplete";

autoOptions = [
  "pineapple",
  "strawberry",
  "mango",
  "banana",
  "watermelon",
  "grape",
  "peach",
  "kiwi",
  "apple"
];

export default function App() {
  return (
    <div>
      <AutoComplete
        id="combo-box-demo"
        options={autoOptions}
        sx={{ width: 300 }}
        renderInput={(params) => (
          <input type="button" value="Pick a fruit!" />
        )}
      />
    </div>
  );
}

我想要的行为是，当用户单击输入/按钮时，会出现一个下拉选择菜单，提供选项，就像 MUI 自动完成组件提供的那样。与我想要的 MUI 文档中显示的自动完成组件的主要区别在于，我希望将其呈现为按钮，而不是将关闭的自动完成呈现为文本字段，然后单击该按钮将打开自动完成菜单。

我尝试过对 renderInput 道具内部和外部组件的引用，我尝试过 renderInput 道具中的不同组件，我尝试过 ChatGPT，我尝试过宰杀一只山羊并将其血洒在我的计算机上，在所有情况下我似乎得到“inputRef.current is null”（这很奇怪，因为大多数时候我什至从未声明过 inputRef 并且该组件的 MUI 文档从未提及 inputRef 作为该组件的一部分）或“inputRef is undefined” （因为我试图分配 inputRef.current），或者是来自一动不动的 AutoComplete 组件的茫然凝视，该组件对我的聚焦/打开完全不感兴趣。

这个答案很接近，但 TextField renderInput 仍然存在。我希望这个菜单看起来像是从按钮本身下拉出来的。

Answer 1

由于似乎没有人回答这个问题，所以我想出了答案（以防万一有人遇到同样的问题）

使用弹出器，然后将自动完成组件嵌入到弹出器中。

import React, { useContext } from 'react';
import { Popper, Box, List, ListItemButton, Autocomplete, TextField } from '@mui/material';

import AppDataContext from '../SupportingModules/AppDataContext';
import filterSocket from '../SupportingModules/FilterSocket';


function TagPopperContent(props) {
    const tagOptions = ['my', 'list', 'of', 'tags'];

    return(
        <Autocomplete
            options={tagOptions}
            renderInput={(params) => (
                <TextField
                    {...params}
                    variant='outlined'
                />
            )}
        />
    )
};

function AddTagPopper(props) {
    const id = open ? 'simple-popper' : undefined;

    return(
        <Popper id={id} open={props.open} anchorEl={props.anchorEl} sx={{ zIndex: 1200 }}>
            <Box>
                <TagPopperContent {...props}/>
            </Box>
        </Popper>
    )
};

这对我试图解决的最初问题没有帮助，因为弹出器本身在点击时不会关闭，但它确实为我提供了自动完成组件的所有功能，来自我选择的任何锚元素（对于我的用例，这恰好是一个按钮）。

如果您对我的解决方案有疑问（无论是作为也希望解决此问题的人，还是作为希望提供一些好的建议的人），请告诉我！我确信有比这个更强大的解决方案（可能像我一开始想要的那样实现点击关闭）！