1 回答

TA貢獻1836條經驗 獲得超13個贊
您可以使用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
添加回答
舉報