时间戳

首页 > 解决方案 > Material UI 自动完成弹出器自定义在点击时关闭

reactjs - Material UI 自动完成弹出器自定义在点击时关闭

问题描述

我正在尝试通过覆盖PaperComponent道具向 Material UI 自动完成纸张添加一个按钮，并在纸张的按钮处添加一个按钮，但单击该按钮会自动关闭自动完成搜索结果

如何防止自动完成搜索结果 Paper 在点击时关闭

这是一个沙箱：https ://codesandbox.io/s/material-demo-mxjyi

更新：我没有注意到沙盒没有保存，现在你可以看到问题了

标签： reactjsmaterial-ui

解决方案

问题是onBlur发生在您的onClick. Material UI 提供了忽略debug模式上的模糊行为，但只有当你的Autocomplete.

解决方法是使用onMouseDown而不是onClick

根据您的 Codesanbox，请在您的组件中将onClick事件更改为事件onMouseDown<button>

<button
   style={{ margin: "10px", padding: "5px" }}
   onMouseDown={() => alert("clicked")}
>

与 Material-UI 无关的问题也在这里进行了讨论

推荐阅读