react hook 点击弹窗外隐藏弹窗_基于hook实现clickoutside
时间: 2023-08-31 11:41:11 浏览: 55
好的,关于React Hook实现点击弹窗外隐藏弹窗,可以使用useRef和useEffect来实现clickoutside的效果。
首先,在弹窗组件中定义一个ref,用来获取弹窗元素的DOM节点:
```javascript
const modalRef = useRef(null);
```
然后在组件中使用useEffect监听document的点击事件,判断点击位置是否在弹窗之外,如果是,则隐藏弹窗:
```javascript
useEffect(() => {
function handleModalClickOutside(event) {
if (modalRef.current && !modalRef.current.contains(event.target)) {
// 点击弹窗外部,隐藏弹窗
hideModal();
}
}
document.addEventListener('click', handleModalClickOutside);
return () => {
document.removeEventListener('click', handleModalClickOutside);
};
}, [hideModal]);
```
这样,当点击document的时候,会触发handleModalClickOutside函数,判断点击位置是否在弹窗之外,如果是,则调用hideModal函数隐藏弹窗。
完整的代码如下:
```javascript
import React, { useRef, useEffect } from 'react';
function Modal({ children, hideModal }) {
const modalRef = useRef(null);
useEffect(() => {
function handleModalClickOutside(event) {
if (modalRef.current && !modalRef.current.contains(event.target)) {
hideModal();
}
}
document.addEventListener('click', handleModalClickOutside);
return () => {
document.removeEventListener('click', handleModalClickOutside);
};
}, [hideModal]);
return (
<div className="modal" ref={modalRef}>
{children}
</div>
);
}
export default Modal;
```
使用的时候,只需要在父组件中传入hideModal函数即可:
```javascript
import React, { useState } from 'react';
import Modal from './Modal';
function App() {
const [showModal, setShowModal] = useState(false);
function handleShowModal() {
setShowModal(true);
}
function handleHideModal() {
setShowModal(false);
}
return (
<div className="app">
<button onClick={handleShowModal}>Show Modal</button>
{showModal && (
<Modal hideModal={handleHideModal}>
<h1>Modal Content</h1>
</Modal>
)}
</div>
);
}
export default App;
```
这样,当点击弹窗外部时,会隐藏弹窗。