点击空白响应事件的hooks
use-click-outside
描述
用于捕获dom以外的元素点击事件
安装npm i --save @kne/use-click-outside 概述
实现了一个点击容器之外触发回调函数的hooks
示例 示例样式.container{ width: 200px; height: 200px; border: solid 1px #ccc; border-radius: 6px; display: flex; justify-content: center; align-items: center; } 示例代码 基本示例 点击容器外部就弹窗提示 _useClickOutside(@kne/use-click-outside),_message(antd/lib/message)
const {default: useClickOutside} = _useClickOutside; const {default: message} = _message; const BaseExample = () => { const ref = useClickOutside(() => { message.success('点击了容器外部'); }); return <div ref={ref} className="container"> 这是组件内部，点击外部试试 </div>; }; render(<BaseExample/>); API
const ref = useClickOutside(callback, dom);
注意：返回的ref必须传给一个dom的ref
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| callback | 模拟的失去焦点事件触发后执行的回调 | function | - |
| dom | 可以触发点击的外部区域，默认为body | dom | document.body |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
