Click away listener 他处点击监听器

用于检测点击事件是否发生在元素之外。它可以监听文档中某处发生的点击事件。

📦 1.5kB 已压缩的包。
⚛️ Support portals

示例

例如，当用户在点击页面除菜单外的任何一处，您可能想隐藏一个下拉的菜单：

<ClickAwayListener onClickAway={handleClickAway}>
  <div className={classes.root}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <div className={classes.dropdown}>
        Click me, I will stay visible until you click outside.
      </div>
    ) : null}
  </div>
</ClickAwayListener>

请注意，该组件仅接受一个子元素。 You can find a more advanced demo on the Menu documentation section.

Portal

The following demo uses Portal to render the dropdown into a new "subtree" outside of current DOM hierarchy.

<ClickAwayListener onClickAway={handleClickAway}>
  <div>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Portal>
        <div className={classes.dropdown}>
          Click me, I will stay visible until you click outside.
        </div>
      </Portal>
    ) : null}
  </div>
</ClickAwayListener>

API

<ClickAwayListener />