如何解决反应-材质用户界面-弹出框,由于某种原因,弹出框的setAnchorElnullonClose不会将其设置为null
我在MenuItem(也从MaterialUI导入)中有一个Popover(从MaterialUI导入)。我已经将popover的open属性设置为anchorEl的布尔值。 onClose是处理anchorEl的要素,如果我在弹出窗口之外单击,则应将anchorEl设置为null。但是,事实并非如此。一旦给定了DOMelement的值,anchorEl就永远不会设置为null,而且我不确定在这里做错了什么。
这是我的代码中对该问题很重要的部分
//state for the anchorEl (also handles the open/close for the popover)
const [usernamePopoverAnchorEl,setUsernamePopoverAnchorEl] = React.useState<null | HTMLElement>(null);
//handle popover open/close
const handleUsernamePopoverClick = (e: any) => {
setUsernamePopoverAnchorEl(e.currentTarget);
}
const usernamePopoverOpen = Boolean(usernamePopoverAnchorEl);
const popoverHandleClose = () => {
setUsernamePopoverAnchorEl(null);
console.log(usernamePopoverAnchorEl);
}
//menuItems with the popovers that don't close
<MenuItem onClick={handleUsernamePopoverClick}>
<span>
<p>Change username</p>
</span>
<Popover open={usernamePopoverOpen} anchorEl={usernamePopoverAnchorEl} onClose={popoverHandleClose}>
<p>Testing helloooo!</p>
</Popover>
</MenuItem>
即使我在handleClose中有setAnchorEl(null),anchorEl的值仍然是HTML元素(弹出框的锚点)。这是当我在弹出窗口之外单击时,anchorEl控制台中日志的图片。
我基本上已经从文档中复制了此内容(除了menuItem之外),所以我不知道为什么弹出窗口无法关闭...
解决方法
BindingFlags = Public | Instance
您正在记录变量,然后再更新状态。试试这个:
const popoverHandleClose = () => {
setUsernamePopoverAnchorEl(null);
console.log(usernamePopoverAnchorEl);
}
,
尝试添加对我有用的 event.stopPropagation()。
const popoverHandleClose = (event) => {
event.stopPropagation();
setUsernamePopoverAnchorEl(null);
console.log(usernamePopoverAnchorEl);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。