reactjs - 在 Material UI 菜单组件中禁用“通过键入选择”
问题描述
我正在尝试制作一个弹出菜单,其中包含几个不同的过滤器(按钮、选择和文本字段)。我正在使用 Material UI Menu 组件,但在尝试使用文本字段时遇到了问题。因为 Menu 组件的行为类似于<Select />
,所以当我在文本字段中键入内容时,它会尝试选择不同的 MenuItem,而不是专注于文本框。
因此,使用下面沙箱中的示例,如果“搜索不同的食物”文本框以“A”、“B”或“C”开头,用户将无法在该文本框中输入任何内容。如果您想输入“杏子”,菜单会将焦点从文本框更改为“Apples”菜单项。
我在 Menu API 中没有看到任何关于此的道具,所以我很想知道是否有任何解决方法,甚至是更适合此的不同组件。
谢谢!
这是一个代码框: 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>
);
}
解决方案
在包含 TextField 的 MenuItem 的 onKeyDown 事件中使用 e.stopPropagation()。这将防止按键事件传播到 Menu 组件。
<MenuItem onKeyDown={(e) => e.stopPropagation()}>
<TextField
value={text}
onChange={(e) => setText(e.target.value)}
variant={"outlined"}
label={"search a different food..."}
/>
</MenuItem>
推荐阅读
- javascript - 有没有比 for 循环更快的方法来对 javascript 中的图像进行阈值处理?
- angular - ng-bootstrap 分页无法通过 i18n 覆盖“下一个”、“上一个”
- python - Peewee 从一个嵌套字典中获取包含某些列的表
- python - Python:groupby 和聚合 > 添加到原始 df
- php - 在 docker 外调用 Docker 容器
- linux - Odoo 容器:数据库连接失败:无法连接到服务器:连接被拒绝(将 odoo 与 localhost postgres 链接)
- java - 如果两个文件相同并且在 Java 中具有相同的内容,则提供日志
- javascript - 如何验证某个字符是否在javascript中的两个专用字符内?
- overriding - 如何覆盖 Terraform 中的 ignore_changes?
- angular - 单击角度 8 时更改类