我正在尝试制作一个弹出菜单,其中包含几个不同的过滤器(按钮、下拉选择框和文本字段)。我正在使用Material UI Menu组件,但尝试使用文本字段时遇到了问题。因为Menu组件像
因此,使用下面代码沙盒中找到的示例,如果您想在“搜索其他食品”文本框中输入“杏子”,则菜单将从文本框转移到“苹果”MenuItem,不能以“A”、“B”或“C”开头的任何东西都无法键入。
我在Menu API中没有看到任何props,因此我想知道是否有任何解决方法,甚至是更适合此项任务的不同组件。
谢谢!
以下是codesandbox链接:https://codesandbox.io/s/wizardly-mccarthy-zy2b7
<Select />
一样运作,当我在文本字段中输入内容时,它会尝试选择不同的MenuItem而不是停留在文本框上。因此,使用下面代码沙盒中找到的示例,如果您想在“搜索其他食品”文本框中输入“杏子”,则菜单将从文本框转移到“苹果”MenuItem,不能以“A”、“B”或“C”开头的任何东西都无法键入。
我在Menu API中没有看到任何props,因此我想知道是否有任何解决方法,甚至是更适合此项任务的不同组件。
谢谢!
以下是codesandbox链接:https://codesandbox.io/s/wizardly-mccarthy-zy2b7
import { useState } from "react";
import "./styles.css";
import { Button, Menu, MenuItem, TextField } from "@material-ui/core";
export default function App() {
const [menu, setMenu] = useState(null);
const [text, setText] = useState("");
return (
<div className="App">
<Button variant="outlined" onClick={(e) => setMenu(e.currentTarget)}>
Filters
</Button>
<Menu
anchorEl={menu}
open={Boolean(menu)}
getContentAnchorEl={null}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
onClose={() => setMenu(null)}
>
<MenuItem>Apples</MenuItem>
<MenuItem>Bananas</MenuItem>
<MenuItem>Carrots</MenuItem>
<MenuItem>
<TextField
value={text}
onChange={(e) => setText(e.target.value)}
variant={"outlined"}
label={"search a different food..."}
/>
</MenuItem>
</Menu>
</div>
);
}