Material-UI 的 Snackbar 为什么点关闭没反应?
我用 Material-UI 写了个 Snackbar,但点了右上角的关闭按钮完全没反应,消息一直卡在页面上。
我已经绑定了 onClose 回调,也设置了 open 状态,但就是关不掉。试过把 setOpen(false) 放进去也不行,是不是哪里漏了?
const [open, setOpen] = useState(true);
const handleClose = () => {
setOpen(false);
};
return (
<Snackbar open={open} onClose={handleClose} message="操作成功" />
);
@material-ui/core或者最新的@mui/material导入了Snackbar和useState。另外,确认一下
handleClose函数是否真的被调用了。你可以在handleClose里加个 console.log 来验证一下,比如这样:如果日志没有打印出来,那可能是点击事件没有正确绑定。确保你的
Snackbar组件渲染正常,没有被其他元素遮挡,或者被其他逻辑阻止了点击事件的触发。如果这些都没有问题,那就再检查一下是否有其他地方修改了
open状态,导致它被重新设置为 true。有时候状态管理复杂时,状态会被意外地重置。如果还是不行,尝试简化一下代码,看看能不能复现问题。有时候把问题缩小范围能更容易找到问题所在。希望这些建议能帮到你。