微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如果在内部单击,则OnBlur关闭react组件

如何解决如果在内部单击,则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>

在上述组件中,我有MenuListTextField。我试图添加 onBlur={handletoggle}的想法是,如果在组件外部单击该组件,它将关闭该组件,但是即使我试图使用TextFieldonChange={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>

实时演示

Edit 63953850/onblur-closing-react-component-if-clicked-inside/63954643#63954643

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。