আমি একই ইস্যুতে আটকে ছিলাম। আমি এখানে পার্টিতে কিছুটা দেরি করেছি, তবে আমার কাছে এটি সত্যিই ভাল সমাধান। আশা করি এটি অন্য কারও উপকারে আসবে। আপনার findDOMNodeকাছ থেকে আমদানি করা দরকারreact-dom
import ReactDOM from 'react-dom';
// ... ✂
componentDidMount() {
document.addEventListener('click', this.handleClickOutside, true);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, true);
}
handleClickOutside = event => {
const domNode = ReactDOM.findDOMNode(this);
if (!domNode || !domNode.contains(event.target)) {
this.setState({
visible: false
});
}
}
প্রতিক্রিয়া হুক পদ্ধতির (16.8 +)
আপনি একটি পুনরায় ব্যবহারযোগ্য হুক বলা যেতে পারেন useComponentVisible।
import { useState, useEffect, useRef } from 'react';
export default function useComponentVisible(initialIsVisible) {
const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
const ref = useRef(null);
const handleClickOutside = (event) => {
if (ref.current && !ref.current.contains(event.target)) {
setIsComponentVisible(false);
}
};
useEffect(() => {
document.addEventListener('click', handleClickOutside, true);
return () => {
document.removeEventListener('click', handleClickOutside, true);
};
});
return { ref, isComponentVisible, setIsComponentVisible };
}
তারপরে উপাদানটিতে আপনি নিম্নলিখিতটি করতে কার্যকারিতা যুক্ত করতে চান:
const DropDown = () => {
const { ref, isComponentVisible } = useComponentVisible(true);
return (
<div ref={ref}>
{isComponentVisible && (<p>Dropdown Component</p>)}
</div>
);
}
একটি কোডস্যান্ডবক্সের উদাহরণ এখানে সন্ধান করুন।