OnBlur 如果在内部单击则关闭反应组件

Question

我使用 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}这样的想法，如果在组件外部单击，它将关闭组件，但即使我尝试在TextFieldusing中添加文本onChange={getStudent}，它也会关闭，为什么会发生这种情况以及如何仅在组件外部单击时关闭组件？谢谢。

Answer 1

您可以使用ClickAwayListener组件来检测用户是否在该Popover区域之外单击。

<ClickAwayListener onClickAway={() => setOpen(false)}>
  <span>
    <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>
  </span>
</ClickAwayListener>

现场演示