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

<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>

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

现场演示