材质UI自动完成关闭点击时，它应该显示弹出窗口

Question

我正试图通过renderOption prop添加一个按钮到Material UI自动完成，并在每一行添加一个按钮，该按钮应该显示一个PopOver组件，但点击按钮会自动关闭自动完成搜索结果

如何防止点击

时自动完成搜索结果关闭这是一个沙盒与我的代码:https://codesandbox.io/s/compassionate-rgb-z88y10

我已经检查了这个其他类似的问题，但在我的情况下，我试图设置他们的renderOptionprop而不是PaperComponent但不幸的是，在我的情况下，仅仅设置函数在onMouseDown事件处理程序上运行是不够的

Answer 1

您可以通过在组件上使用openprop来创建受控的Autocomplete。onClose给出了Popover想要关闭的各种原因，你可以在MUI文档中找到它们。

检查原因是否为selectOption如果是，我们什么都不做，然后返回。如果不是，我们设置isOpen为false关闭弹出窗口

const [isOpen, setIsOpen] = useState(false);
return (
<Autocomplete
renderOption={(props, label) => (
<PopOver
{...props}
id={props.id}
label={label.label}
message={label.label}
/>
)}
id="combo-box-demo"
open={isOpen}
onOpen={() => setIsOpen(true)}
onClose={(e, reason) => {
if (reason === "selectOption") return;
setIsOpen(false);
}}
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
);