我可以禁用 Material-UI SpeedDial 鼠标悬停事件吗答案

【问题标题】：Can I disable the Material-UI SpeedDial mouseover event我可以禁用 Material-UI SpeedDial 鼠标悬停事件吗
【发布时间】：2020-03-23 13:03:23
【问题描述】：

我想禁用 Material-UI 的 SpeedDial 组件 (https://material-ui.com/api/speed-dial/) 的默认鼠标悬停/悬停行为。目前，当您将鼠标悬停在主图标上时，SpeedDial 组件将打开。它也将在单击时打开。这给我们的一些用户带来了问题，因为当他们将鼠标悬停在按钮上时 - 它会打开 - 他们会立即单击并关闭。

我想保留打开触摸屏设备快速拨号的单击操作。

有没有一种简单的方法可以禁用悬停/鼠标悬停事件？据我所知，API 不允许这样做。

谢谢！

【问题讨论】：

标签： javascript reactjs material-ui speed-dial

【解决方案1】：

这个行为可以通过忽略onOpen prop 来实现，用onClick prop 控制组件。

// Component code

const [open, setOpen] = React.useState(false);

const handleOpen = (event) => {
  setOpen(!open);
};

return (
   <SpeedDial
      onClick={handleOpen}
      open={open}
      ...
   />
);

您可以在此处查看一个工作示例：https://codesandbox.io/s/material-demo-1lwci

【讨论】：