如何解决如果在内部单击,则OnBlur关闭react组件
我已经使用Material UI如下创建了一个React组件
<Popper
open={open}
anchorEl={anchorRef.current}
onBlur={handletoggle}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input type="text" name="Student" onChange={getStudent}></input>
</Popper>
在上述组件中,我有MenuList
和TextField
。我试图添加 onBlur={handletoggle}
的想法是,如果在组件外部单击该组件,它将关闭该组件,但是即使我试图使用TextField
在onChange={getStudent}
中添加文本,它也会关闭,为什么会发生以及如何仅在外部单击才能关闭组件?谢谢。
解决方法
您可以使用ClickAwayListener
组件来检测用户是否在Popover
区域之外单击。
<ClickAwayListener onClickAway={() => setOpen(false)}>
<div>
<Popper
open={open}
anchorEl={ref.current}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input
type="text"
name="Student"
/>
</Popper>
<Button variant="outlined" onClick={() => setOpen((o) => !o)} ref={ref}>
Nothing
</Button>
</div>
</ClickAwayListener>
实时演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。