亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如果在內部單擊,則 OnBlur 關閉反應組件

如果在內部單擊,則 OnBlur 關閉反應組件

30秒到達戰場 2023-03-10 15:59:34
我使用 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},為什么會發生這種情況以及如何僅在組件外部單擊時關閉組件?謝謝。
查看完整描述

1 回答

?
開心每一天1111

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

查看完整回答
反對 回復 2023-03-10
  • 1 回答
  • 0 關注
  • 102 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號