我发现我正在整个应用程序中重用行为,当用户在某个元素之外单击时,我可以将其隐藏.
通过引入钩子,我是否可以将它放在钩子中并在各个组件之间共享,以免我在每个组件中编写相同的逻辑？
我已经在组件中实现了一次,如下所示.
const Dropdown = () => {
const [isDropdownVisible,setIsDropdownVisible] = useState(false);
const wrapperRef = useRef<HTMLDivElement>(null);
const handleHideDropdown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
setIsDropdownVisible(false);
}
};
const handleClickOutside = (event: Event) => {
if (
wrapperRef.current &&
!wrapperRef.current.contains(event.target as Node)
) {
setIsDropdownVisible(false);
}
};
useEffect(() => {
document.addEventListener('keydown',handleHideDropdown,true);
document.addEventListener('click',handleClickOutside,true);
return () => {
document.removeEventListener('keydown',true);
document.removeEventListener('click',true);
};
});
return(
<DropdownWrapper ref={wrapperRef}>
<p>Dropdown</p>
</DropdownWrapper>
);
}
最佳答案
这个有可能.
原文链接：https://www.f2er.com/js/531139.html您可以创建一个称为useComponentVisible的可重用钩子
import { useState,useEffect,useRef } from 'react';
export default function useComponentVisible(initialIsVisible) {
const [isComponentVisible,setIsComponentVisible] = useState(initialIsVisible);
const ref = useRef<HTMLDivElement>(null);
const handleHideDropdown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
setIsElementVisible(false);
}
};
const handleClickOutside = (event: Event) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
setIsElementVisible(false);
}
};
useEffect(() => {
document.addEventListener('keydown',true);
};
});
return { ref,isComponentVisible,setIsComponentVisible };
}
const DropDown = () => {
const { ref,isComponentVisible } = useComponentVisible(true);
return (
<div ref={ref}>
{isComponentVisible && (<p>Going into Hiding</p>)}
</div>
);
}
在此处找到codesandbox示例.
