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

Question

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

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

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

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

Answer 1

问题是 onBlur发生在您的 onClick 之前. Material UI 提供忽略 debug 上的模糊行为模式，但只有在 Autocomplete 中有值时才会发生这种情况.

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

请根据您的 Codesanbox 更改 onClick事件到onMouseDown您的 <button> 中的事件组件

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

讨论了与 Material-UI 无关的问题 here还有