React useClickOutside钩子
处理点击包装组件外部的事件。
- 创建一个自定义钩子,接受一个
ref
和一个处理click
事件的callback
。 - 使用
useEffect()
钩子来附加和清除click
事件。 - 使用
useRef()
钩子为您的点击组件创建一个ref
,并将其传递给useClickOutside
钩子。
const useClickOutside = (ref, callback) => {
const handleClick = e => {
if (ref.current && !ref.current.contains(e.target)) {
callback();
}
};
React.useEffect(() => {
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
};
});
};
const ClickBox = ({ onClickOutside }) => {
const clickRef = React.useRef();
useClickOutside(clickRef, onClickOutside);
return (
<div
className="click-box"
ref={clickRef}
style={{
border: '2px dashed orangered',
height: 200,
width: 400,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<p>点击此元素之外的区域</p>
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<ClickBox onClickOutside={() => alert('点击了外部')} />
);