# 外部点击处理

处理组件外部点击。

### Hook

`useOutsideClick`

提供一个或一组 DOM 的 ref，在此之的外点击认为是外部点击。

```jsx
import React, { useRef, useState } from "react";
import { useOutsideClick } from "@tencent/tea-component/lib/util";

function Demo() {
  const ref = useRef(null);
  const [count, setCount] = useState(0);
  const { listen } = useOutsideClick(ref);
  listen(() => setCount(count => count + 1));

  return (
    <div ref={ref}>点击外部 {count} 次</div>
  );
}
```

### 使用示例

[Example: useOutsideClick](./_example/useOutsideClickExample.jsx)

<!-- ## HOC

`withOutsideClick`


```jsx
import React, { Component } from "react";
import { withOutsideClick } from "@tencent/tea-component/lib/util";

@withOutsideClick("click")
class Demo extends Component {

  state = {
    count: 0,
  }

  click = () => {
    this.setState(({ count }) => ({ count: count + 1 }));
  }

  render() {
    return (
      <div>Demo</div>
    );
  }
}
```

[Example: withOutsideClick](./_example/withOutsideClickExample.jsx) -->