Topic: Vector Map Click events
cpeople priority asked 2 years ago
How to handle onClick events in MDBVectorMap
? I can see the click events API in documentation of Angular, Vue and StandardJS but not in React.
cariforef free answered 2 years ago
Hello, When I add an EventListener on MDBVectorMap, if disable the standard color change on click event. I thought the listener would add an action instead of replacing. When I add my eventListener, the selected area is not colored anymore.
const ref = useRef(null);
useEffect(() => {
const handleClick = (event) => {
setSelectedRegion(event.target?.id);
console.log("Button clicked", event.target?.id);
};
const element = ref.current;
element.addEventListener("click", handleClick);
return () => {
element.removeEventListener("click", handleClick);
};
}, []);
return (
<MDBVectorMap
mapRef={ ref }
hoverFill="#0793B4"
selectFill="#86b24e"
fill="#FFFFFF"
style={{ backgroundColor: "#bbdefb" }}
hover={false}
zoomEvents={false}
selectRegion={selectedRegion} />);
Krzysztof Wilk staff answered 2 years ago
Hi!
For now - you have to use JavaScript to select the items and append an addEventListener
to them, sorry about that. We will add the onSelect
event as soon as possible :)
Keep coding!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 3.0.0
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: Yes
- Provided link: No