如果在内部单击，则 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>

现场演示

https://codesandbox.io/s/63953850onblur-closing-react-component-if-clicked-inside6395464363954643-brih9?file=/demo.tsx