[英]Can I disable the Material-UI SpeedDial mouseover event
I am wanting to disable the default mouseover/hover behaviour of Material-UI's SpeedDial component ( https://material-ui.com/api/speed-dial/ ). 我想禁用Material-UI的SpeedDial组件( https://material-ui.com/api/speed-dial/ )的默认鼠标悬停/悬停行为。 Currently when you mouseover the primary icon, the SpeedDial component will open. 当前,当您将鼠标悬停在主要图标上时,SpeedDial组件将打开。 It will also open on click. 单击它也将打开。 This has caused issues with some of our users as when they mouse over the button - it opens - and they immediately click and it closes. 当某些用户将鼠标悬停在按钮上时,它引起了问题-它打开-然后他们立即单击并关闭。
I would like to keep the just the click action for opening the SpeedDial for touch screen devices. 我想保留单击操作,以打开触摸屏设备的SpeedDial。
Is there a simple way for me to disable the hover/mouseover event? 我有一种简单的方法来禁用悬停/鼠标悬停事件吗? As far as I can tell the API does not allow this. 据我所知,API不允许这样做。
Thanks! 谢谢!
This behaviour can be achieved by ignoring onOpen
prop and control the component with onClick
prop. 可以通过忽略onOpen
并使用onClick
onOpen
控制组件来实现此行为。
// Component code
const [open, setOpen] = React.useState(false);
const handleOpen = (event) => {
setOpen(!open);
};
return (
<SpeedDial
onClick={handleOpen}
open={open}
...
/>
);
You can see a working example here: https://codesandbox.io/s/material-demo-1lwci 您可以在这里看到一个有效的示例: https : //codesandbox.io/s/material-demo-1lwci
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.